diff --git a/examples/forms/js/example.js b/examples/forms/js/example.js index 73c4d653..81b98e82 100644 --- a/examples/forms/js/example.js +++ b/examples/forms/js/example.js @@ -2,6 +2,8 @@ This example demonstrates various form elements. */ +'use strict'; + Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) { @@ -14,12 +16,12 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { description: 'Allows you to enter an array of strings.', options: [ { - description: '...', + description: 'Array input', max: 3, width: 256 }, { - description: '...', + description: 'Array input with label', label: 'Please enter up to 3 names', max: 3, width: 256 @@ -27,7 +29,9 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { ] }, Button: { - description: '...', + description: 'Can be used as a form element ' + + '(i.e. has a value and fires change events) ' + + 'when it\'s selectable, or has multiple values.', options: [ { description: 'Selectable image button with tooltip', @@ -61,7 +65,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { ] }, ButtonGroup: { - description: '...', + description: 'Works as a form element when it\'s selectable.', options: [ { description: 'Image buttons, select one', @@ -132,7 +136,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { ] }, Checkbox: { - description: '...', + description: 'Has a value of either true or false', options: [ { description: 'Checkbox' @@ -346,6 +350,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 placeholder', height: 128, @@ -377,6 +388,45 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { separators: [ {title: 'x', width: 16} ] + }, + { + inputs: [ + Ox.Checkbox({ + width: 16 + }), + Ox.FormElementGroup({ + elements: [ + Ox.Input({ + type: 'int', + width: 64 + }), + Ox.Select({ + items: [ + {id: 'items', title: 'items'}, + {id: 'hours', title: 'hours'}, + {id: 'gb', title: 'GB'}, + ], + overlap: 'left', + width: 64 + }), + ], + float: 'right', + width: 128 + }), + Ox.Select({ + items: [ + {id: 'title', title: 'Title'}, + {id: 'director', title: 'Director'}, + {id: 'year', title: 'Year'} + ], + value: 'title', + width: 128 + }) + ], + separators: [ + {title: 'Limit to', width: 64}, + {title: 'sorted by', width: 64} + ] } ] }, @@ -426,15 +476,6 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { Range: { description: '...', options: [ - { - description: '...', - arrows: true, - max: 10, - min: 0, - size: 256, - thumbSize: 32, - thumbValue: true - }, { description: '...', max: 1, @@ -444,6 +485,15 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { thumbValue: true, values: ['Off', 'On'] }, + { + description: '...', + arrows: true, + max: 10, + min: 0, + size: 360, + thumbSize: 32, + thumbValue: true + }, { description: '...', size: 360, @@ -482,7 +532,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { description: '...', options: [ { - description: '...', + description: 'Image select, select one', items: [ {id: 'a', title: 'Select me'}, {id: 'b', title: 'or select me'}, @@ -492,12 +542,47 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { width: 16 // fixme! }, { - description: '...', + description: 'Text select with label, select one', items: [ {id: 'a', title: 'Select me'}, {id: 'b', title: 'or select me'}, {id: 'c', title: 'or select me'} - ] + ], + label: 'Please select...', + labelWidth: 128 + }, + { + description: 'Text select with title, select one or two', + items: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'or select me'} + ], + max: 2, + min: 1, + title: 'Please select...' + }, + { + description: 'Text select with title, select two', + items: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'or select me'} + ], + max: 2, + min: 2, + title: 'Please select...' + }, + { + description: 'Text select with title, select any', + items: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'and select me'} + ], + max: -1, + min: 0, + title: 'Please select...' } ] }, @@ -545,7 +630,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { } ] } - } + }, $form = Ox.FormPanel({ form: Object.keys(elements).sort().map(function(name) { var element = elements[name];