Ox.ArrayInput '
+ 'allows you to enter an array of strings.',
items: [
Ox.ArrayInput({
id: 'a',
description: 'A: {max: 3}',
label: 'Enter up to 3 names',
max: 3,
width: 256
})
],
validate: function() {
return true;
}
},
{
id: 'button',
title: 'Button',
description: 'Buttons',
items: [
Ox.Button({
id: 'lock',
type: 'image',
values: [
{id: 'unlocked', title: 'lock'},
{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',
title: 'ButtonGroup',
description: 'Buttons',
items: [
Ox.ButtonGroup({
buttons: [
{id: 'exclamation', title: 'warning'},
{id: 'question', title: 'help'}
],
id: 'buttongroup_image',
selectable: true,
type: 'image'
}),
Ox.ButtonGroup({
buttons: [
{id: 'option1', title: 'Option 1'},
{id: 'option2', title: 'Option 2'},
{id: 'option3', title: 'Option 3'}
],
id: 'buttongroup_text',
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: 'Ox.ColorInput',
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: 'Ox.DateInput',
items: [
Ox.DateInput({
id: 'A',
description: 'A {format: "short"}',
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: 'Ox.DateTimeInput',
items: [
Ox.DateTimeInput({
id: 'A',
description: 'A {format: "short"}',
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,
max: 100,
type: 'int'
}),
Ox.Input({
autocomplete: countries,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: 'auto2',
width: 256
}),
Ox.Input({
description: 'Textarea',
id: 'textarea',
height: 128,
type: 'textarea',
width: 256
})
],
validate: function() {
return true;
}
},
{
id: 'inputgroup',
title: 'InputGroup',
items: [
Ox.InputGroup({
id: 'inputgroupWidthHeight',
inputs: [
Ox.Input({
id: 'width',
placeholder: 'Width',
type: 'int',
width: 64
}),
Ox.Input({
id: 'height',
placeholder: 'Height',
type: 'int',
width: 64
})
],
separators: [
{title: 'x', width: 16}
]
})
],
validate: function() {
return true;
}
},
{
id: 'objectarrayinput',
title: 'ObjectArrayInput',
description: '...',
items: [
Ox.ObjectArrayInput({
buttonTitles: {
add: 'Add person',
remove: 'Remove person'
},
id: 'people',
inputs: [
{
element: 'Input',
options: {id: 'firstname', label: 'First Name'}
},
{
element: 'Input',
options: {id: 'lastname', label: 'Last Name'}
},
{
element: 'ArrayInput',
options: {id: 'phonenumbers', label: 'Phone Numbers'}
},
{
element: 'Input',
options: {id: 'email', label: 'E-Mail Address'}
},
]
})
],
validate: function() {
return true;
}
},
{
id: 'range',
title: 'Range',
description: '...',
items: [
Ox.Range({
arrows: true,
id: 'foobar',
label: 'FOOBAR',
max: 10,
min: 0,
size: 256,
thumbSize: 32,
thumbValue: true
}),
Ox.Range({
id: 'on_or_off',
max: 1,
min: 0,
size: 48,
thumbSize: 32,
thumbValue: true,
values: ["Off", "On"]
}),
Ox.Range({
id: 'w',
description: 'foo',
size: 360,
thumbValue: true,
trackColors: [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(0, 255, 0)',
'rgb(0, 255, 255)',
'rgb(0, 0, 255)',
'rgb(255, 0, 255)'
],
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
}),
Ox.Range({
id: 'x',
description: 'foo',
max: 359,
min: 0,
size: 360,
thumbSize: 36,
thumbValue: true,
trackColors: [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(0, 255, 0)',
'rgb(0, 255, 255)',
'rgb(0, 0, 255)',
'rgb(255, 0, 255)',
'rgb(255, 0, 0)'
],
trackGradient: true
})
],
validate: function() {
return true;
}
},
{
id: 'select',
title: 'Select',
items: [
Ox.Select({
id: 'select',
items: [
{id: 'option1', title: 'Option 1'},
{id: 'option2', title: 'Option 2'},
{id: 'option3', title: 'Option 3'}
],
title: 'Please select...',
width: 256
})
],
validate: function() {
return true;
}
},
{
id: 'selectinput',
title: 'SelectInput',
items: [
Ox.SelectInput({
id: 'selectinput',
inputWidth: 128,
items: [
{id: 'option1', title: 'Option 1'},
{id: 'option2', title: 'Option 2'},
{id: 'option3', title: 'Option 3'},
{id: 'other', title: 'Other...'}
],
placeholder: 'Please specify...',
title: 'Please select...',
width: 256
})
],
validate: function() {
return true;
}
},
{
id: 'spreadsheet',
title: 'Spreadsheet',
items: [
Ox.Spreadsheet({
id: 'budget',
columns: ['2010', '2011', '2012', '2013', '2014'],
rows: ['Item A', 'Item B', 'Item C'],
title: 'Budget'
})
],
validate: function() {
return true;
}
}
]
})
.bindEvent({
change: function(data) {
$panel.replaceElement(1,
$list = Ox.TreeList({
data: $form.values(),
expanded: true,
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
);
}
}),
$list = Ox.TreeList({
data: $form.values(),
width: 256 - Ox.UI.SCROLLBAR_SIZE
}),
$panel = Ox.SplitPanel({
elements: [
{
element: $form
},
{
element: $list,
resizable: true,
resize: [256],
size: 256
}
],
orientation: 'horizontal'
})
.appendTo(Ox.$body)
});