add forms example
This commit is contained in:
rolux
parent
61e425f64d
commit
75b1fbbc7f
2 changed files with 309 additions and 0 deletions
11
examples/forms/index.html
Normal file
11
examples/forms/index.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Forms</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
298
examples/forms/js/example.js
Normal file
298
examples/forms/js/example.js
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
/*
|
||||
This example demonstrates various form elements.
|
||||
*/
|
||||
|
||||
Ox.load('UI', function() {
|
||||
|
||||
var $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: '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)
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue