483 lines
No EOL
18 KiB
JavaScript
483 lines
No EOL
18 KiB
JavaScript
/*
|
|
This example demonstrates various form elements.
|
|
*/
|
|
|
|
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|
|
|
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.',
|
|
items: [
|
|
Ox.ArrayInput({
|
|
id: 'a',
|
|
description: 'A: <code>{max: 3}</code>',
|
|
label: 'Enter up to 3 names',
|
|
max: 3,
|
|
width: 256
|
|
})
|
|
],
|
|
validate: function() {
|
|
return true;
|
|
}
|
|
},
|
|
{
|
|
id: 'button',
|
|
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: '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: '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'},
|
|
{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: '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',
|
|
items: [
|
|
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() {
|
|
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"]
|
|
}),
|
|
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() {
|
|
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)
|
|
|
|
}); |