update forms example
This commit is contained in:
rolux
parent
3d3d963ca3
commit
a2add10902
1 changed files with 204 additions and 19 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue