Ox.ArrayInput allows you to enter an array of strings.',
+ items: [
+ Ox.ArrayInput({
+ id: 'names',
+ label: 'Enter up to 3 names',
+ max: 3,
+ width: 256
+ })
+ ],
+ validate: function() {
+ return true;
+ }
+ },
+ {
+ id: 'button',
+ title: 'Button',
+ description: 'Buttons',
+ items: [
+ Ox.Button({
+ id: 'like',
+ selectable: true,
+ title: 'like',
+ type: 'image'
+ }),
+ Ox.Button({
+ id: 'lock',
+ selectable: true,
+ title: 'lock',
+ type: 'image'
+ }).bindEvent({
+ change: function(data) {
+ this.options({
+ title: data.value ? 'unlock' : 'lock'
+ });
+ }
+ }),
+ 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: 'checkboxes',
+ title: 'Checkboxes',
+ description: '...',
+ items: [
+ Ox.Checkbox({
+ id: 'single',
+ title: 'single',
+ width: 256
+ }),
+ 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: 'input',
+ title: 'Input',
+ items: [
+ Ox.Input({
+ id: 'input1',
+ width: 256
+ })
+ ],
+ 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"]
+ })
+ ],
+ 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)
+
+});
\ No newline at end of file