forked from 0x2620/oxjs
update forms example
This commit is contained in:
rolux
parent
6bdf96fe6b
commit
b6138ead48
1 changed files with 549 additions and 425 deletions
|
|
@ -9,265 +9,357 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
}).map(function(country) {
|
}).map(function(country) {
|
||||||
return country.name;
|
return country.name;
|
||||||
})),
|
})),
|
||||||
$form = Ox.FormPanel({
|
elements = {
|
||||||
form: [
|
ArrayInput: {
|
||||||
|
description: 'Allows you to enter an array of strings.',
|
||||||
|
options: [
|
||||||
{
|
{
|
||||||
id: 'arrayinput',
|
description: '...',
|
||||||
title: 'ArrayInput',
|
|
||||||
description: '<code>Ox.ArrayInput</code> '
|
|
||||||
+ 'allows you to enter an array of strings.',
|
|
||||||
items: [
|
|
||||||
Ox.ArrayInput({
|
|
||||||
id: 'a',
|
|
||||||
description: 'A: <code>{max: 3}</code>',
|
|
||||||
label: 'Enter up to 3 names',
|
|
||||||
max: 3,
|
max: 3,
|
||||||
width: 256
|
width: 256
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'button',
|
description: '...',
|
||||||
title: 'Button',
|
label: 'Please enter up to 3 names',
|
||||||
description: 'Buttons',
|
max: 3,
|
||||||
items: [
|
width: 256
|
||||||
Ox.Button({
|
}
|
||||||
id: 'lock',
|
]
|
||||||
|
},
|
||||||
|
Button: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Selectable image button with tooltip',
|
||||||
|
selectable: true,
|
||||||
|
title: 'like',
|
||||||
|
tooltip: 'Like',
|
||||||
|
type: 'image'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Multi-value image button with tooltip',
|
||||||
|
tooltip: ['Lock', 'Unlock'],
|
||||||
type: 'image',
|
type: 'image',
|
||||||
values: [
|
values: [
|
||||||
{id: 'unlocked', title: 'lock'},
|
{id: 'unlocked', title: 'lock'},
|
||||||
{id: 'locked', title: 'unlock'}
|
{id: 'locked', title: 'unlock'}
|
||||||
]
|
]
|
||||||
}),
|
|
||||||
Ox.Button({
|
|
||||||
id: 'like',
|
|
||||||
selectable: true,
|
|
||||||
title: 'like',
|
|
||||||
type: 'image'
|
|
||||||
}),
|
|
||||||
Ox.Button({
|
|
||||||
id: 'select',
|
|
||||||
label: 'Selectable Button',
|
|
||||||
labelWidth: 128,
|
|
||||||
selectable: true,
|
|
||||||
title: 'Selectable Button'
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'buttongroup',
|
description: 'Selectable button',
|
||||||
title: 'ButtonGroup',
|
selectable: true,
|
||||||
description: 'Buttons',
|
title: 'Select me'
|
||||||
items: [
|
},
|
||||||
Ox.ButtonGroup({
|
{
|
||||||
buttons: [
|
description: 'Multi-value button with fixed width',
|
||||||
{id: 'exclamation', title: 'warning'},
|
values: [
|
||||||
{id: 'question', title: 'help'}
|
{id: 'off', title: 'Off'},
|
||||||
|
{id: 'on', title: 'On'}
|
||||||
|
],
|
||||||
|
width: 64
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
ButtonGroup: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Image buttons, select one',
|
||||||
|
buttons: [
|
||||||
|
{id: 'grid', title: 'grid'},
|
||||||
|
{id: 'iconlist', title: 'iconlist'},
|
||||||
|
{id: 'list', title: 'list'},
|
||||||
|
{id: 'columns', title: 'columns'}
|
||||||
],
|
],
|
||||||
id: 'buttongroup_image',
|
|
||||||
selectable: true,
|
selectable: true,
|
||||||
type: 'image'
|
type: 'image'
|
||||||
}),
|
},
|
||||||
Ox.ButtonGroup({
|
{
|
||||||
|
description: 'Image buttons, select any',
|
||||||
buttons: [
|
buttons: [
|
||||||
{id: 'option1', title: 'Option 1'},
|
{id: 'check', title: 'check'},
|
||||||
{id: 'option2', title: 'Option 2'},
|
{id: 'flag', title: 'flag'},
|
||||||
{id: 'option3', title: 'Option 3'}
|
{id: 'like', title: 'like'},
|
||||||
|
{id: 'star', title: 'star'}
|
||||||
],
|
],
|
||||||
id: 'buttongroup_text',
|
max: -1,
|
||||||
selectable: true
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'checkbox',
|
|
||||||
title: 'Checkbox',
|
|
||||||
description: '...',
|
|
||||||
items: [
|
|
||||||
Ox.Checkbox({
|
|
||||||
id: 'single',
|
|
||||||
title: 'single',
|
|
||||||
width: 256
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'checkboxgroup',
|
|
||||||
title: 'CheckboxGroup',
|
|
||||||
description: '...',
|
|
||||||
items: [
|
|
||||||
Ox.CheckboxGroup({
|
|
||||||
checkboxes: [
|
|
||||||
{id: 'option1', title: 'Option 1'},
|
|
||||||
{id: 'option2', title: 'Option 2'},
|
|
||||||
{id: 'option3', title: 'Option 3'}
|
|
||||||
],
|
|
||||||
description: 'Description...',
|
|
||||||
id: 'group'
|
|
||||||
}),
|
|
||||||
Ox.CheckboxGroup({
|
|
||||||
checkboxes: [
|
|
||||||
{id: 'optiona', title: 'Option 1'},
|
|
||||||
{id: 'optionb', title: 'Option 2'},
|
|
||||||
{id: 'optionc', title: 'Option 3'}
|
|
||||||
],
|
|
||||||
id: 'list',
|
|
||||||
type: 'list',
|
|
||||||
width: 256
|
|
||||||
}),
|
|
||||||
Ox.CheckboxGroup({
|
|
||||||
checkboxes: [
|
|
||||||
{id: 'option1', title: 'Option 1'},
|
|
||||||
{id: 'option2', title: 'Option 2'},
|
|
||||||
{id: 'option3', title: 'Option 3'}
|
|
||||||
],
|
|
||||||
id: 'group2'
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'colorinput',
|
|
||||||
title: 'ColorInput',
|
|
||||||
description: '<code>Ox.ColorInput</code>',
|
|
||||||
items: [
|
|
||||||
Ox.ColorInput({
|
|
||||||
id: 'rgb',
|
|
||||||
value: [255, 0, 0]
|
|
||||||
}),
|
|
||||||
Ox.ColorInput({
|
|
||||||
id: 'hsl',
|
|
||||||
value: [0, 1, 0.5]
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'dateinput',
|
|
||||||
title: 'DateInput',
|
|
||||||
description: '<code>Ox.DateInput</code>',
|
|
||||||
items: [
|
|
||||||
Ox.DateInput({
|
|
||||||
id: 'A',
|
|
||||||
description: '<code>A {format: "short"}</code>',
|
|
||||||
format: 'short'
|
|
||||||
}),
|
|
||||||
Ox.DateInput({
|
|
||||||
id: 'medium',
|
|
||||||
description: 'Medium',
|
|
||||||
format: 'medium'
|
|
||||||
}),
|
|
||||||
Ox.DateInput({
|
|
||||||
id: 'long',
|
|
||||||
description: 'Long',
|
|
||||||
format: 'long'
|
|
||||||
}),
|
|
||||||
Ox.DateInput({
|
|
||||||
id: 'mediumweekday',
|
|
||||||
description: 'Medium with weekday',
|
|
||||||
format: 'medium',
|
|
||||||
weekday: true
|
|
||||||
}),
|
|
||||||
Ox.DateInput({
|
|
||||||
id: 'longweekday',
|
|
||||||
description: 'Long with weekday',
|
|
||||||
format: 'long',
|
|
||||||
weekday: true
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'datetimeinput',
|
|
||||||
title: 'DateTimeInput',
|
|
||||||
description: '<code>Ox.DateTimeInput</code>',
|
|
||||||
items: [
|
|
||||||
Ox.DateTimeInput({
|
|
||||||
id: 'A',
|
|
||||||
description: '<code>A {format: "short"}</code>',
|
|
||||||
ampm: true,
|
|
||||||
format: 'short'
|
|
||||||
}),
|
|
||||||
Ox.DateTimeInput({
|
|
||||||
id: 'medium',
|
|
||||||
description: 'Medium',
|
|
||||||
format: 'medium',
|
|
||||||
seconds: true,
|
|
||||||
weekday: true
|
|
||||||
}),
|
|
||||||
Ox.DateTimeInput({
|
|
||||||
id: 'long',
|
|
||||||
description: 'Long',
|
|
||||||
format: 'long',
|
|
||||||
seconds: true,
|
|
||||||
weekday: true
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'input',
|
|
||||||
title: 'Input',
|
|
||||||
items: [
|
|
||||||
Ox.Input({
|
|
||||||
id: 'input1',
|
|
||||||
width: 256
|
|
||||||
}),
|
|
||||||
Ox.Input({
|
|
||||||
arrows: true,
|
|
||||||
description: 'Integer Input',
|
|
||||||
id: 'inputInt',
|
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 100,
|
selectable: true,
|
||||||
type: 'int'
|
type: 'image'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Text buttons, select one',
|
||||||
|
buttons: [
|
||||||
|
{id: 'a', title: 'Select me'},
|
||||||
|
{id: 'b', title: 'or select me'},
|
||||||
|
{id: 'c', title: 'or select me'}
|
||||||
|
],
|
||||||
|
selectable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Text buttons, select one or two',
|
||||||
|
buttons: [
|
||||||
|
{id: 'a', title: 'Select me'},
|
||||||
|
{id: 'b', title: 'and select me'},
|
||||||
|
{id: 'c', title: 'or select me'}
|
||||||
|
],
|
||||||
|
max: 2,
|
||||||
|
min: 1,
|
||||||
|
selectable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Text buttons, select two',
|
||||||
|
buttons: [
|
||||||
|
{id: 'a', title: 'Select me'},
|
||||||
|
{id: 'b', title: 'and select me'},
|
||||||
|
{id: 'c', title: 'or select me'}
|
||||||
|
],
|
||||||
|
max: 2,
|
||||||
|
min: 2,
|
||||||
|
selectable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Text buttons, select any',
|
||||||
|
buttons: [
|
||||||
|
{id: 'a', title: 'Select me'},
|
||||||
|
{id: 'b', title: 'and select me'},
|
||||||
|
{id: 'c', title: 'and select me'}
|
||||||
|
],
|
||||||
|
max: -1,
|
||||||
|
min: 0,
|
||||||
|
selectable: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
Checkbox: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Checkbox'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Checkbox with label',
|
||||||
|
title: 'Check me',
|
||||||
|
width: 128
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
CheckboxGroup: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Checkboxes, select one',
|
||||||
|
checkboxes: [
|
||||||
|
{id: 'a', title: 'Check me'},
|
||||||
|
{id: 'b', title: 'or check me'},
|
||||||
|
{id: 'c', title: 'or check me'}
|
||||||
|
],
|
||||||
|
width: 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Checkboxes, select one or two',
|
||||||
|
checkboxes: [
|
||||||
|
{id: 'a', title: 'Check me'},
|
||||||
|
{id: 'b', title: 'and check me'},
|
||||||
|
{id: 'c', title: 'or check me'}
|
||||||
|
],
|
||||||
|
max: 2,
|
||||||
|
min: 1,
|
||||||
|
width: 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Checkboxes, select two',
|
||||||
|
checkboxes: [
|
||||||
|
{id: 'a', title: 'Check me'},
|
||||||
|
{id: 'b', title: 'and check me'},
|
||||||
|
{id: 'c', title: 'or check me'}
|
||||||
|
],
|
||||||
|
max: 2,
|
||||||
|
min: 2,
|
||||||
|
width: 360
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Checkboxes, select any',
|
||||||
|
checkboxes: [
|
||||||
|
{id: 'a', title: 'Check me'},
|
||||||
|
{id: 'b', title: 'and check me'},
|
||||||
|
{id: 'c', title: 'and check me'}
|
||||||
|
],
|
||||||
|
max: -1,
|
||||||
|
min: 0,
|
||||||
|
width: 360
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
ColorInput: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'RGB',
|
||||||
|
value: [255, 0, 0]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'HSL',
|
||||||
|
mode: 'hsl'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
DateInput: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Short date input'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Medium date input',
|
||||||
|
format: 'medium'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Long date input',
|
||||||
|
format: 'long'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Medium date input with weekday',
|
||||||
|
format: 'medium',
|
||||||
|
weekday: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Long date input with weekday',
|
||||||
|
format: 'long',
|
||||||
|
weekday: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
DateTimeInput: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Short date/time input with am/pm',
|
||||||
|
ampm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Medium date/time input with seconds',
|
||||||
|
format: 'medium',
|
||||||
|
seconds: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Long date/time input with weekday',
|
||||||
|
format: 'long',
|
||||||
|
weekday: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
FormElementGroup: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
|
elements: [
|
||||||
|
Ox.Select({
|
||||||
|
items: [
|
||||||
|
{id: 'departure', title: 'Departure'},
|
||||||
|
{id: 'arrival', title: 'Arrival'}
|
||||||
|
],
|
||||||
|
overlap: 'right',
|
||||||
|
width: 96
|
||||||
}),
|
}),
|
||||||
Ox.Input({
|
Ox.Select({
|
||||||
|
items: [
|
||||||
|
{id: 'before', title: 'is before'},
|
||||||
|
{id: 'after', title: 'is after'}
|
||||||
|
],
|
||||||
|
overlap: 'right',
|
||||||
|
width: 96
|
||||||
|
}),
|
||||||
|
Ox.DateInput()
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
Input: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
|
arrows: true,
|
||||||
|
max: 100,
|
||||||
|
min: 0,
|
||||||
|
type: 'int'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Input with placeholder',
|
||||||
|
placeholder: 'Placeholder'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Input with label',
|
||||||
|
label: 'Label'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Input with clear button',
|
||||||
|
clear: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Autocomplete with replace',
|
||||||
|
autocomplete: countries,
|
||||||
|
autocompleteReplace: true,
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Autocomplete with replace and correct',
|
||||||
|
autocomplete: countries,
|
||||||
|
autocompleteReplace: true,
|
||||||
|
autocompleteReplaceCorrect: true,
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Autocomplete with select and highlight',
|
||||||
|
autocomplete: countries,
|
||||||
|
autocompleteSelect: true,
|
||||||
|
autocompleteSelectHighlight: true,
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Autocomplete with replace and select',
|
||||||
|
autocomplete: countries,
|
||||||
|
autocompleteReplace: true,
|
||||||
|
autocompleteSelect: true,
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Autocomplete with replace, correct and select',
|
||||||
autocomplete: countries,
|
autocomplete: countries,
|
||||||
autocompleteReplace: true,
|
autocompleteReplace: true,
|
||||||
autocompleteReplaceCorrect: true,
|
autocompleteReplaceCorrect: true,
|
||||||
autocompleteSelect: true,
|
autocompleteSelect: true,
|
||||||
autocompleteSelectHighlight: true,
|
|
||||||
id: 'auto2',
|
|
||||||
width: 256
|
width: 256
|
||||||
}),
|
|
||||||
Ox.Input({
|
|
||||||
description: 'Textarea',
|
|
||||||
id: 'textarea',
|
|
||||||
height: 128,
|
|
||||||
type: 'textarea',
|
|
||||||
width: 256
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'inputgroup',
|
description: 'Password',
|
||||||
title: 'InputGroup',
|
type: 'password',
|
||||||
items: [
|
width: 256
|
||||||
Ox.InputGroup({
|
},
|
||||||
id: 'inputgroupWidthHeight',
|
{
|
||||||
|
description: 'Password with label, placeholder and clear button',
|
||||||
|
clear: true,
|
||||||
|
label: 'Label',
|
||||||
|
placeholder: 'Placeholder',
|
||||||
|
type: 'password',
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Textarea with placeholder',
|
||||||
|
height: 128,
|
||||||
|
placeholder: 'Placeholder',
|
||||||
|
type: 'textarea',
|
||||||
|
width: 256
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
InputGroup: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
inputs: [
|
inputs: [
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
id: 'width',
|
id: 'width',
|
||||||
|
|
@ -285,23 +377,17 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
separators: [
|
separators: [
|
||||||
{title: 'x', width: 16}
|
{title: 'x', width: 16}
|
||||||
]
|
]
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
ObjectArrayInput: {
|
||||||
id: 'objectarrayinput',
|
|
||||||
title: 'ObjectArrayInput',
|
|
||||||
description: '...',
|
description: '...',
|
||||||
items: [
|
options: [
|
||||||
Ox.ObjectArrayInput({
|
{
|
||||||
buttonTitles: {
|
buttonTitles: {
|
||||||
add: 'Add person',
|
add: 'Add contact',
|
||||||
remove: 'Remove person'
|
remove: 'Remove contact'
|
||||||
},
|
},
|
||||||
id: 'people',
|
|
||||||
inputs: [
|
inputs: [
|
||||||
{
|
{
|
||||||
element: 'Input',
|
element: 'Input',
|
||||||
|
|
@ -313,46 +399,53 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: 'ArrayInput',
|
element: 'ArrayInput',
|
||||||
options: {id: 'phonenumbers', label: 'Phone Numbers'}
|
options: {id: 'phone', label: 'Phone Numbers', max: 3}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
element: 'Input',
|
element: 'Input',
|
||||||
options: {id: 'email', label: 'E-Mail Address'}
|
options: {id: 'email', label: 'E-Mail Address'}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
ObjectInput: {
|
||||||
id: 'range',
|
description: '...',
|
||||||
title: 'Range',
|
options: [
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
|
elements: [
|
||||||
|
Ox.Input({id: 'firstname', label: 'First Name'}),
|
||||||
|
Ox.Input({id: 'lastname', label: 'First Name'}),
|
||||||
|
Ox.ArrayInput({id: 'phone', label: 'Phone Numbers', max: 3}),
|
||||||
|
Ox.Input({id: 'email', label: 'E-Mail Address'})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
Range: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
description: '...',
|
description: '...',
|
||||||
items: [
|
|
||||||
Ox.Range({
|
|
||||||
arrows: true,
|
arrows: true,
|
||||||
id: 'foobar',
|
|
||||||
label: 'FOOBAR',
|
|
||||||
max: 10,
|
max: 10,
|
||||||
min: 0,
|
min: 0,
|
||||||
size: 256,
|
size: 256,
|
||||||
thumbSize: 32,
|
thumbSize: 32,
|
||||||
thumbValue: true
|
thumbValue: true
|
||||||
}),
|
},
|
||||||
Ox.Range({
|
{
|
||||||
id: 'on_or_off',
|
description: '...',
|
||||||
max: 1,
|
max: 1,
|
||||||
min: 0,
|
min: 0,
|
||||||
size: 48,
|
size: 48,
|
||||||
thumbSize: 32,
|
thumbSize: 32,
|
||||||
thumbValue: true,
|
thumbValue: true,
|
||||||
values: ["Off", "On"]
|
values: ['Off', 'On']
|
||||||
}),
|
},
|
||||||
Ox.Range({
|
{
|
||||||
id: 'w',
|
description: '...',
|
||||||
description: 'foo',
|
|
||||||
size: 360,
|
size: 360,
|
||||||
thumbValue: true,
|
thumbValue: true,
|
||||||
trackColors: [
|
trackColors: [
|
||||||
|
|
@ -364,10 +457,9 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
'rgb(255, 0, 255)'
|
'rgb(255, 0, 255)'
|
||||||
],
|
],
|
||||||
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
|
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
|
||||||
}),
|
},
|
||||||
Ox.Range({
|
{
|
||||||
id: 'x',
|
description: '...',
|
||||||
description: 'foo',
|
|
||||||
max: 359,
|
max: 359,
|
||||||
min: 0,
|
min: 0,
|
||||||
size: 360,
|
size: 360,
|
||||||
|
|
@ -383,72 +475,103 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
'rgb(255, 0, 0)'
|
'rgb(255, 0, 0)'
|
||||||
],
|
],
|
||||||
trackGradient: true
|
trackGradient: true
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
Select: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
|
items: [
|
||||||
|
{id: 'a', title: 'Select me'},
|
||||||
|
{id: 'b', title: 'or select me'},
|
||||||
|
{id: 'c', title: 'or select me'}
|
||||||
|
],
|
||||||
|
type: 'image',
|
||||||
|
width: 16 // fixme!
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'select',
|
description: '...',
|
||||||
title: 'Select',
|
|
||||||
items: [
|
items: [
|
||||||
Ox.Select({
|
{id: 'a', title: 'Select me'},
|
||||||
id: 'select',
|
{id: 'b', title: 'or select me'},
|
||||||
items: [
|
{id: 'c', title: 'or select me'}
|
||||||
{id: 'option1', title: 'Option 1'},
|
]
|
||||||
{id: 'option2', title: 'Option 2'},
|
|
||||||
{id: 'option3', title: 'Option 3'}
|
|
||||||
],
|
|
||||||
title: 'Please select...',
|
|
||||||
width: 256
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
SelectInput: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
{
|
{
|
||||||
id: 'selectinput',
|
description: '...',
|
||||||
title: 'SelectInput',
|
|
||||||
items: [
|
items: [
|
||||||
Ox.SelectInput({
|
{id: 'male', title: 'Male'},
|
||||||
id: 'selectinput',
|
{id: 'female', title: 'Female'},
|
||||||
inputWidth: 128,
|
|
||||||
items: [
|
|
||||||
{id: 'option1', title: 'Option 1'},
|
|
||||||
{id: 'option2', title: 'Option 2'},
|
|
||||||
{id: 'option3', title: 'Option 3'},
|
|
||||||
{id: 'other', title: 'Other...'}
|
{id: 'other', title: 'Other...'}
|
||||||
],
|
],
|
||||||
placeholder: 'Please specify...',
|
value: 'male',
|
||||||
title: 'Please select...',
|
|
||||||
width: 256
|
width: 256
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
Spreadsheet: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
{
|
{
|
||||||
id: 'spreadsheet',
|
title: 'Budget',
|
||||||
title: 'Spreadsheet',
|
value: {
|
||||||
items: [
|
columns: [2010, 2011, 2012],
|
||||||
Ox.Spreadsheet({
|
rows: ['Item A', 'Item B', 'Item C']
|
||||||
id: 'budget',
|
|
||||||
columns: ['2010', '2011', '2012', '2013', '2014'],
|
|
||||||
rows: ['Item A', 'Item B', 'Item C'],
|
|
||||||
title: 'Budget'
|
|
||||||
})
|
|
||||||
],
|
|
||||||
validate: function() {
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
TimeInput: {
|
||||||
|
description: '...',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
description: 'Time input with am/pm',
|
||||||
|
ampm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Time input with seconds',
|
||||||
|
seconds: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
description: 'Time input with milliseconds',
|
||||||
|
milliseconds: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$form = Ox.FormPanel({
|
||||||
|
form: Object.keys(elements).sort().map(function(name) {
|
||||||
|
var element = elements[name];
|
||||||
|
return {
|
||||||
|
id: name.toLowerCase(),
|
||||||
|
title: name,
|
||||||
|
description: '<code>Ox.' + name + '</code> '
|
||||||
|
+ element.description[0].toLowerCase()
|
||||||
|
+ element.description.slice(1),
|
||||||
|
descriptionWidth: 360,
|
||||||
|
items: element.options.map(function(options, i) {
|
||||||
|
return Ox[name](Ox.extend(options, {
|
||||||
|
id: Ox.char(97 + i),
|
||||||
|
description: Ox.char(65 + i) + '. '
|
||||||
|
+ options.description
|
||||||
|
}));
|
||||||
|
}),
|
||||||
|
validate: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: function(data) {
|
||||||
|
setTimeout(function() {
|
||||||
$panel.replaceElement(1,
|
$panel.replaceElement(1,
|
||||||
$list = Ox.TreeList({
|
$list = Ox.TreeList({
|
||||||
data: $form.values(),
|
data: $form.values(),
|
||||||
|
|
@ -456,6 +579,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
width: 256 - Ox.UI.SCROLLBAR_SIZE
|
width: 256 - Ox.UI.SCROLLBAR_SIZE
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
}, 250);
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue