0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update form elements example

Browse source
This commit is contained in:
rolux 2012-07-09 16:00:39 +02:00
parent 4b29ffe70e
commit c30831d9bf
1 changed files with 82 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
examples/forms/form_elements/js/example.js
View file

@ -138,11 +138,12 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
description: 'Has a value of either true or false', description: 'Has a value of either true or false',
options: [ options: [
{ {
description: 'Checkbox' description: 'Checkbox',
}, },
{ {
description: 'Checkbox with label', description: 'Checkbox with label',
label: 'Check me', label: 'Check me',
labelWidth: 112, // fixme
width: 128 width: 128
}, },
{ {
@ -153,7 +154,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
CheckboxGroup: { CheckboxGroup: {
description: '...', description: 'Combines multiple checkboxes',
options: [ options: [
{ {
description: 'Checkboxes, select one', description: 'Checkboxes, select one',
@ -196,24 +197,34 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
max: -1, max: -1,
min: 0, min: 0,
width: 360 width: 360
},
{
description: 'Checkboxes as a list, select one',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'or check me'},
{id: 'c', title: 'or check me'}
],
type: 'list',
width: 360
} }
] ]
}, },
ColorInput: { //ColorInput: {
description: '...', // description: '...',
options: [ // options: [
{ // {
description: 'RGB', // description: 'RGB',
value: [255, 0, 0] // value: [255, 0, 0]
}, // },
{ // {
description: 'HSL', // description: 'HSL',
mode: 'hsl' // mode: 'hsl'
} // }
] // ]
}, //},
DateInput: { DateInput: {
description: '...', description: 'Allows you to enter a date.',
options: [ options: [
{ {
description: 'Short date input' description: 'Short date input'
@ -239,7 +250,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
DateTimeInput: { DateTimeInput: {
description: '...', description: 'Allows you to enter a date and a time.',
options: [ options: [
{ {
description: 'Short date/time input with am/pm', description: 'Short date/time input with am/pm',
@ -258,10 +269,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
FormElementGroup: { FormElementGroup: {
description: '...', description: 'Combines multiple form elements.',
options: [ options: [
{ {
description: '...', description: 'Two Selects and one DateInput',
elements: [ elements: [
Ox.Select({ Ox.Select({
items: [ items: [
@ -285,10 +296,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
Input: { Input: {
description: '...', description: 'Is a standard text input element, with various options.',
options: [ options: [
{ {
description: '...', description: 'Integer between 0 and 100',
arrows: true, arrows: true,
max: 100, max: 100,
min: 0, min: 0,
@ -354,13 +365,13 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
type: 'password', type: 'password',
width: 256 width: 256
}, },
{ //{
description: 'Textarea with label', // description: 'Textarea with label',
height: 128, // height: 128,
label: 'Label', // label: 'Label',
type: 'textarea', // type: 'textarea',
width: 256 // width: 256
}, //},
{ {
description: 'Textarea with placeholder', description: 'Textarea with placeholder',
height: 128, height: 128,
@ -371,29 +382,30 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
InputGroup: { InputGroup: {
description: '...', description: 'Combines multiple input elements and separators.',
options: [ options: [
{ {
description: '...', description: 'Two Inputs',
inputs: [ inputs: [
Ox.Input({ Ox.Input({
id: 'width', id: 'width',
placeholder: 'Width', placeholder: 'Width',
type: 'int', //type: 'int',
width: 64 width: 64
}), }),
Ox.Input({ Ox.Input({
id: 'height', id: 'height',
placeholder: 'Height', placeholder: 'Height',
type: 'int', //type: 'int',
width: 64 width: 64
}) })
], ],
separators: [ separators: [
{title: 'x', width: 16} {title: '×', width: 16}
] ]
}, },
{ {
description: 'A Checkbox, an Input, and two Selects',
inputs: [ inputs: [
Ox.Checkbox({ Ox.Checkbox({
width: 16 width: 16
@ -435,9 +447,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
ObjectArrayInput: { ObjectArrayInput: {
description: '...', description: 'Allows you to enter an array of objects.',
options: [ options: [
{ {
description: 'Multiple contacts',
buttonTitles: { buttonTitles: {
add: 'Add contact', add: 'Add contact',
remove: 'Remove contact' remove: 'Remove contact'
@ -464,10 +477,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
ObjectInput: { ObjectInput: {
description: '...', description: 'Combines multiple key/value pairs.',
options: [ options: [
{ {
description: '...', description: 'Contact object',
elements: [ elements: [
Ox.Input({id: 'firstname', label: 'First Name'}), Ox.Input({id: 'firstname', label: 'First Name'}),
Ox.Input({id: 'lastname', label: 'First Name'}), Ox.Input({id: 'lastname', label: 'First Name'}),
@ -478,10 +491,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
Range: { Range: {
description: '...', description: 'Is a horizontal slider.',
options: [ options: [
{ {
description: '...', description: 'On/off switch',
max: 1, max: 1,
min: 0, min: 0,
size: 48, size: 48,
@ -490,7 +503,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
values: ['Off', 'On'] values: ['Off', 'On']
}, },
{ {
description: '...', description: 'A value between 0 and 10',
arrows: true, arrows: true,
max: 10, max: 10,
min: 0, min: 0,
@ -499,7 +512,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
thumbValue: true thumbValue: true
}, },
{ {
description: '...', description: 'One of six colors',
size: 360, size: 360,
thumbValue: true, thumbValue: true,
trackColors: [ trackColors: [
@ -513,7 +526,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta'] values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
}, },
{ {
description: '...', description: 'A value between 0 and 359',
max: 359, max: 359,
min: 0, min: 0,
size: 360, size: 360,
@ -533,7 +546,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
Select: { Select: {
description: '...', description: 'Is a select element.',
options: [ options: [
{ {
description: 'Image select, select one', description: 'Image select, select one',
@ -591,22 +604,22 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
SelectInput: { SelectInput: {
description: '...', description: 'Is a select element with optional text input.',
options: [ options: [
{ {
description: '...', description: '...',
items: [ items: [
{id: 'male', title: 'Male'}, {id: 'javascript', title: 'JavaScript'},
{id: 'female', title: 'Female'}, {id: 'python', title: 'Python'},
{id: 'other', title: 'Other...'} {id: 'other', title: 'Other...'}
], ],
value: 'male', value: 'javascript',
width: 256 width: 256
} }
] ]
}, },
Spreadsheet: { Spreadsheet: {
description: '...', description: 'Combines a variable number of columns and rows.',
options: [ options: [
{ {
title: 'Budget', title: 'Budget',
@ -618,7 +631,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
] ]
}, },
TimeInput: { TimeInput: {
description: '...', description: 'Allows you to enter a time.',
options: [ options: [
{ {
description: 'Time input with am/pm', description: 'Time input with am/pm',
@ -659,23 +672,11 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
}) })
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: showValues,
setTimeout(function() { select: showValues
$panel.replaceElement(1,
$list = Ox.TreeList({
data: $form.values(),
expanded: true,
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
);
}, 250);
}
}), }),
$list = Ox.TreeList({ $list = Ox.Element(),
data: $form.values(),
width: 256 - Ox.UI.SCROLLBAR_SIZE
}),
$panel = Ox.SplitPanel({ $panel = Ox.SplitPanel({
elements: [ elements: [
@ -692,4 +693,24 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
orientation: 'horizontal' orientation: 'horizontal'
}) })
.appendTo(Ox.$body); .appendTo(Ox.$body);
showValues({section: 'arrayinput'});
function showValues(data) {
setTimeout(function() {
Ox.print(Ox.extend(
{}, data.section, $form.values()[data.section]
))
$panel.replaceElement(1,
Ox.TreeList({
data: Ox.extend(
{}, data.section, $form.values()[data.section]
),
expanded: true,
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
);
}, 250);
}
}); });