update form elements example
This commit is contained in:
rolux
parent
4b29ffe70e
commit
c30831d9bf
1 changed files with 82 additions and 61 deletions
|
|
@ -138,11 +138,12 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
description: 'Has a value of either true or false',
|
||||
options: [
|
||||
{
|
||||
description: 'Checkbox'
|
||||
description: 'Checkbox',
|
||||
},
|
||||
{
|
||||
description: 'Checkbox with label',
|
||||
label: 'Check me',
|
||||
labelWidth: 112, // fixme
|
||||
width: 128
|
||||
},
|
||||
{
|
||||
|
|
@ -153,7 +154,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
CheckboxGroup: {
|
||||
description: '...',
|
||||
description: 'Combines multiple checkboxes',
|
||||
options: [
|
||||
{
|
||||
description: 'Checkboxes, select one',
|
||||
|
|
@ -196,24 +197,34 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
max: -1,
|
||||
min: 0,
|
||||
width: 360
|
||||
},
|
||||
{
|
||||
description: 'Checkboxes as a list, select one',
|
||||
checkboxes: [
|
||||
{id: 'a', title: 'Check me'},
|
||||
{id: 'b', title: 'or check me'},
|
||||
{id: 'c', title: 'or check me'}
|
||||
],
|
||||
type: 'list',
|
||||
width: 360
|
||||
}
|
||||
]
|
||||
},
|
||||
ColorInput: {
|
||||
description: '...',
|
||||
options: [
|
||||
{
|
||||
description: 'RGB',
|
||||
value: [255, 0, 0]
|
||||
},
|
||||
{
|
||||
description: 'HSL',
|
||||
mode: 'hsl'
|
||||
}
|
||||
]
|
||||
},
|
||||
//ColorInput: {
|
||||
// description: '...',
|
||||
// options: [
|
||||
// {
|
||||
// description: 'RGB',
|
||||
// value: [255, 0, 0]
|
||||
// },
|
||||
// {
|
||||
// description: 'HSL',
|
||||
// mode: 'hsl'
|
||||
// }
|
||||
// ]
|
||||
//},
|
||||
DateInput: {
|
||||
description: '...',
|
||||
description: 'Allows you to enter a date.',
|
||||
options: [
|
||||
{
|
||||
description: 'Short date input'
|
||||
|
|
@ -239,7 +250,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
DateTimeInput: {
|
||||
description: '...',
|
||||
description: 'Allows you to enter a date and a time.',
|
||||
options: [
|
||||
{
|
||||
description: 'Short date/time input with am/pm',
|
||||
|
|
@ -258,10 +269,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
FormElementGroup: {
|
||||
description: '...',
|
||||
description: 'Combines multiple form elements.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Two Selects and one DateInput',
|
||||
elements: [
|
||||
Ox.Select({
|
||||
items: [
|
||||
|
|
@ -285,10 +296,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
Input: {
|
||||
description: '...',
|
||||
description: 'Is a standard text input element, with various options.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Integer between 0 and 100',
|
||||
arrows: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
|
|
@ -354,13 +365,13 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
type: 'password',
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
description: 'Textarea with label',
|
||||
height: 128,
|
||||
label: 'Label',
|
||||
type: 'textarea',
|
||||
width: 256
|
||||
},
|
||||
//{
|
||||
// description: 'Textarea with label',
|
||||
// height: 128,
|
||||
// label: 'Label',
|
||||
// type: 'textarea',
|
||||
// width: 256
|
||||
//},
|
||||
{
|
||||
description: 'Textarea with placeholder',
|
||||
height: 128,
|
||||
|
|
@ -371,29 +382,30 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
InputGroup: {
|
||||
description: '...',
|
||||
description: 'Combines multiple input elements and separators.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Two Inputs',
|
||||
inputs: [
|
||||
Ox.Input({
|
||||
id: 'width',
|
||||
placeholder: 'Width',
|
||||
type: 'int',
|
||||
//type: 'int',
|
||||
width: 64
|
||||
}),
|
||||
Ox.Input({
|
||||
id: 'height',
|
||||
placeholder: 'Height',
|
||||
type: 'int',
|
||||
//type: 'int',
|
||||
width: 64
|
||||
})
|
||||
],
|
||||
separators: [
|
||||
{title: 'x', width: 16}
|
||||
{title: '×', width: 16}
|
||||
]
|
||||
},
|
||||
{
|
||||
description: 'A Checkbox, an Input, and two Selects',
|
||||
inputs: [
|
||||
Ox.Checkbox({
|
||||
width: 16
|
||||
|
|
@ -435,9 +447,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
ObjectArrayInput: {
|
||||
description: '...',
|
||||
description: 'Allows you to enter an array of objects.',
|
||||
options: [
|
||||
{
|
||||
description: 'Multiple contacts',
|
||||
buttonTitles: {
|
||||
add: 'Add contact',
|
||||
remove: 'Remove contact'
|
||||
|
|
@ -464,10 +477,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
ObjectInput: {
|
||||
description: '...',
|
||||
description: 'Combines multiple key/value pairs.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Contact object',
|
||||
elements: [
|
||||
Ox.Input({id: 'firstname', label: 'First Name'}),
|
||||
Ox.Input({id: 'lastname', label: 'First Name'}),
|
||||
|
|
@ -478,10 +491,10 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
Range: {
|
||||
description: '...',
|
||||
description: 'Is a horizontal slider.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'On/off switch',
|
||||
max: 1,
|
||||
min: 0,
|
||||
size: 48,
|
||||
|
|
@ -490,7 +503,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
values: ['Off', 'On']
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
description: 'A value between 0 and 10',
|
||||
arrows: true,
|
||||
max: 10,
|
||||
min: 0,
|
||||
|
|
@ -499,7 +512,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
thumbValue: true
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
description: 'One of six colors',
|
||||
size: 360,
|
||||
thumbValue: true,
|
||||
trackColors: [
|
||||
|
|
@ -513,7 +526,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
description: 'A value between 0 and 359',
|
||||
max: 359,
|
||||
min: 0,
|
||||
size: 360,
|
||||
|
|
@ -533,7 +546,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
Select: {
|
||||
description: '...',
|
||||
description: 'Is a select element.',
|
||||
options: [
|
||||
{
|
||||
description: 'Image select, select one',
|
||||
|
|
@ -591,22 +604,22 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
SelectInput: {
|
||||
description: '...',
|
||||
description: 'Is a select element with optional text input.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
items: [
|
||||
{id: 'male', title: 'Male'},
|
||||
{id: 'female', title: 'Female'},
|
||||
{id: 'javascript', title: 'JavaScript'},
|
||||
{id: 'python', title: 'Python'},
|
||||
{id: 'other', title: 'Other...'}
|
||||
],
|
||||
value: 'male',
|
||||
value: 'javascript',
|
||||
width: 256
|
||||
}
|
||||
]
|
||||
},
|
||||
Spreadsheet: {
|
||||
description: '...',
|
||||
description: 'Combines a variable number of columns and rows.',
|
||||
options: [
|
||||
{
|
||||
title: 'Budget',
|
||||
|
|
@ -618,7 +631,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
TimeInput: {
|
||||
description: '...',
|
||||
description: 'Allows you to enter a time.',
|
||||
options: [
|
||||
{
|
||||
description: 'Time input with am/pm',
|
||||
|
|
@ -659,23 +672,11 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
})
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
setTimeout(function() {
|
||||
$panel.replaceElement(1,
|
||||
$list = Ox.TreeList({
|
||||
data: $form.values(),
|
||||
expanded: true,
|
||||
width: 256 - Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
);
|
||||
}, 250);
|
||||
}
|
||||
change: showValues,
|
||||
select: showValues
|
||||
}),
|
||||
|
||||
$list = Ox.TreeList({
|
||||
data: $form.values(),
|
||||
width: 256 - Ox.UI.SCROLLBAR_SIZE
|
||||
}),
|
||||
$list = Ox.Element(),
|
||||
|
||||
$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
|
|
@ -692,4 +693,24 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
orientation: 'horizontal'
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
|
||||
showValues({section: 'arrayinput'});
|
||||
|
||||
function showValues(data) {
|
||||
setTimeout(function() {
|
||||
Ox.print(Ox.extend(
|
||||
{}, data.section, $form.values()[data.section]
|
||||
))
|
||||
$panel.replaceElement(1,
|
||||
Ox.TreeList({
|
||||
data: Ox.extend(
|
||||
{}, data.section, $form.values()[data.section]
|
||||
),
|
||||
expanded: true,
|
||||
width: 256 - Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue