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