update forms example

This commit is contained in:
rolux 2012-06-14 12:36:51 +02:00
parent 3d3d963ca3
commit a2add10902

View file

@ -2,17 +2,24 @@
This example demonstrates various form elements.
*/
Ox.load('UI', function() {
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
var $form = Ox.FormPanel({
var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) {
return !country.dissolved && !country.disputed && !country.exception;
}).map(function(country) {
return country.name;
})),
$form = Ox.FormPanel({
form: [
{
id: 'arrayinput',
title: 'ArrayInput',
description: '<code>Ox.ArrayInput</code> allows you to enter an array of strings.',
description: '<code>Ox.ArrayInput</code> '
+ 'allows you to enter an array of strings.',
items: [
Ox.ArrayInput({
id: 'names',
id: 'a',
description: 'A: <code>{max: 3}</code>',
label: 'Enter up to 3 names',
max: 3,
width: 256
@ -27,24 +34,20 @@ Ox.load('UI', function() {
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: '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',
@ -86,15 +89,25 @@ Ox.load('UI', function() {
}
},
{
id: 'checkboxes',
title: 'Checkboxes',
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'},
@ -127,6 +140,91 @@ Ox.load('UI', function() {
return true;
}
},
{
id: 'colorinput',
title: 'ColorInput',
description: '<code>Ox.ColorInput</code>',
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: '<code>Ox.DateInput</code>',
items: [
Ox.DateInput({
id: 'A',
description: '<code>A {format: "short"}</code>',
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: '<code>Ox.DateTimeInput</code>',
items: [
Ox.DateTimeInput({
id: 'A',
description: '<code>A {format: "short"}</code>',
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',
@ -134,6 +232,59 @@ Ox.load('UI', function() {
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() {
@ -198,6 +349,40 @@ Ox.load('UI', function() {
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() {