update forms example
This commit is contained in:
rolux
parent
43077ceb88
commit
73a74ea9c6
1 changed files with 103 additions and 18 deletions
|
|
@ -2,6 +2,8 @@
|
|||
This example demonstrates various form elements.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||
|
||||
var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) {
|
||||
|
|
@ -14,12 +16,12 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
description: 'Allows you to enter an array of strings.',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Array input',
|
||||
max: 3,
|
||||
width: 256
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
description: 'Array input with label',
|
||||
label: 'Please enter up to 3 names',
|
||||
max: 3,
|
||||
width: 256
|
||||
|
|
@ -27,7 +29,9 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
Button: {
|
||||
description: '...',
|
||||
description: 'Can be used as a form element '
|
||||
+ '(i.e. has a value and fires change events) '
|
||||
+ 'when it\'s selectable, or has multiple values.',
|
||||
options: [
|
||||
{
|
||||
description: 'Selectable image button with tooltip',
|
||||
|
|
@ -61,7 +65,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
ButtonGroup: {
|
||||
description: '...',
|
||||
description: 'Works as a form element when it\'s selectable.',
|
||||
options: [
|
||||
{
|
||||
description: 'Image buttons, select one',
|
||||
|
|
@ -132,7 +136,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
]
|
||||
},
|
||||
Checkbox: {
|
||||
description: '...',
|
||||
description: 'Has a value of either true or false',
|
||||
options: [
|
||||
{
|
||||
description: 'Checkbox'
|
||||
|
|
@ -346,6 +350,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 placeholder',
|
||||
height: 128,
|
||||
|
|
@ -377,6 +388,45 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
separators: [
|
||||
{title: 'x', width: 16}
|
||||
]
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
Ox.Checkbox({
|
||||
width: 16
|
||||
}),
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
Ox.Input({
|
||||
type: 'int',
|
||||
width: 64
|
||||
}),
|
||||
Ox.Select({
|
||||
items: [
|
||||
{id: 'items', title: 'items'},
|
||||
{id: 'hours', title: 'hours'},
|
||||
{id: 'gb', title: 'GB'},
|
||||
],
|
||||
overlap: 'left',
|
||||
width: 64
|
||||
}),
|
||||
],
|
||||
float: 'right',
|
||||
width: 128
|
||||
}),
|
||||
Ox.Select({
|
||||
items: [
|
||||
{id: 'title', title: 'Title'},
|
||||
{id: 'director', title: 'Director'},
|
||||
{id: 'year', title: 'Year'}
|
||||
],
|
||||
value: 'title',
|
||||
width: 128
|
||||
})
|
||||
],
|
||||
separators: [
|
||||
{title: 'Limit to', width: 64},
|
||||
{title: 'sorted by', width: 64}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -426,15 +476,6 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
Range: {
|
||||
description: '...',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
arrows: true,
|
||||
max: 10,
|
||||
min: 0,
|
||||
size: 256,
|
||||
thumbSize: 32,
|
||||
thumbValue: true
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
max: 1,
|
||||
|
|
@ -444,6 +485,15 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
thumbValue: true,
|
||||
values: ['Off', 'On']
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
arrows: true,
|
||||
max: 10,
|
||||
min: 0,
|
||||
size: 360,
|
||||
thumbSize: 32,
|
||||
thumbValue: true
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
size: 360,
|
||||
|
|
@ -482,7 +532,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
description: '...',
|
||||
options: [
|
||||
{
|
||||
description: '...',
|
||||
description: 'Image select, select one',
|
||||
items: [
|
||||
{id: 'a', title: 'Select me'},
|
||||
{id: 'b', title: 'or select me'},
|
||||
|
|
@ -492,12 +542,47 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
width: 16 // fixme!
|
||||
},
|
||||
{
|
||||
description: '...',
|
||||
description: 'Text select with label, select one',
|
||||
items: [
|
||||
{id: 'a', title: 'Select me'},
|
||||
{id: 'b', title: 'or select me'},
|
||||
{id: 'c', title: 'or select me'}
|
||||
]
|
||||
],
|
||||
label: 'Please select...',
|
||||
labelWidth: 128
|
||||
},
|
||||
{
|
||||
description: 'Text select with title, select one or two',
|
||||
items: [
|
||||
{id: 'a', title: 'Select me'},
|
||||
{id: 'b', title: 'and select me'},
|
||||
{id: 'c', title: 'or select me'}
|
||||
],
|
||||
max: 2,
|
||||
min: 1,
|
||||
title: 'Please select...'
|
||||
},
|
||||
{
|
||||
description: 'Text select with title, select two',
|
||||
items: [
|
||||
{id: 'a', title: 'Select me'},
|
||||
{id: 'b', title: 'and select me'},
|
||||
{id: 'c', title: 'or select me'}
|
||||
],
|
||||
max: 2,
|
||||
min: 2,
|
||||
title: 'Please select...'
|
||||
},
|
||||
{
|
||||
description: 'Text select with title, select any',
|
||||
items: [
|
||||
{id: 'a', title: 'Select me'},
|
||||
{id: 'b', title: 'and select me'},
|
||||
{id: 'c', title: 'and select me'}
|
||||
],
|
||||
max: -1,
|
||||
min: 0,
|
||||
title: 'Please select...'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -545,7 +630,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
|||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
$form = Ox.FormPanel({
|
||||
form: Object.keys(elements).sort().map(function(name) {
|
||||
var element = elements[name];
|
||||
|
|
|
|||
Loading…
Reference in a new issue