From 75b1fbbc7f54a015346a5579dc2788f1d180e263 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 13 Jun 2012 15:57:05 +0200 Subject: [PATCH] add forms example --- examples/forms/index.html | 11 ++ examples/forms/js/example.js | 298 +++++++++++++++++++++++++++++++++++ 2 files changed, 309 insertions(+) create mode 100644 examples/forms/index.html create mode 100644 examples/forms/js/example.js diff --git a/examples/forms/index.html b/examples/forms/index.html new file mode 100644 index 00000000..11da5623 --- /dev/null +++ b/examples/forms/index.html @@ -0,0 +1,11 @@ + + + + Forms + + + + + + + \ No newline at end of file diff --git a/examples/forms/js/example.js b/examples/forms/js/example.js new file mode 100644 index 00000000..fb2b3f54 --- /dev/null +++ b/examples/forms/js/example.js @@ -0,0 +1,298 @@ +/* +This example demonstrates various form elements. +*/ + +Ox.load('UI', function() { + + var $form = Ox.FormPanel({ + form: [ + { + id: 'arrayinput', + title: 'ArrayInput', + description: '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