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.
|
This example demonstrates various form elements.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
|
|
||||||
var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) {
|
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.',
|
description: 'Allows you to enter an array of strings.',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
description: '...',
|
description: 'Array input',
|
||||||
max: 3,
|
max: 3,
|
||||||
width: 256
|
width: 256
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
description: '...',
|
description: 'Array input with label',
|
||||||
label: 'Please enter up to 3 names',
|
label: 'Please enter up to 3 names',
|
||||||
max: 3,
|
max: 3,
|
||||||
width: 256
|
width: 256
|
||||||
|
|
@ -27,7 +29,9 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
Button: {
|
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: [
|
options: [
|
||||||
{
|
{
|
||||||
description: 'Selectable image button with tooltip',
|
description: 'Selectable image button with tooltip',
|
||||||
|
|
@ -61,7 +65,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
ButtonGroup: {
|
ButtonGroup: {
|
||||||
description: '...',
|
description: 'Works as a form element when it\'s selectable.',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
description: 'Image buttons, select one',
|
description: 'Image buttons, select one',
|
||||||
|
|
@ -132,7 +136,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
Checkbox: {
|
Checkbox: {
|
||||||
description: '...',
|
description: 'Has a value of either true or false',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
description: 'Checkbox'
|
description: 'Checkbox'
|
||||||
|
|
@ -346,6 +350,13 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
type: 'password',
|
type: 'password',
|
||||||
width: 256
|
width: 256
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
description: 'Textarea with label',
|
||||||
|
height: 128,
|
||||||
|
label: 'Label',
|
||||||
|
type: 'textarea',
|
||||||
|
width: 256
|
||||||
|
},
|
||||||
{
|
{
|
||||||
description: 'Textarea with placeholder',
|
description: 'Textarea with placeholder',
|
||||||
height: 128,
|
height: 128,
|
||||||
|
|
@ -377,6 +388,45 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
separators: [
|
separators: [
|
||||||
{title: 'x', width: 16}
|
{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: {
|
Range: {
|
||||||
description: '...',
|
description: '...',
|
||||||
options: [
|
options: [
|
||||||
{
|
|
||||||
description: '...',
|
|
||||||
arrows: true,
|
|
||||||
max: 10,
|
|
||||||
min: 0,
|
|
||||||
size: 256,
|
|
||||||
thumbSize: 32,
|
|
||||||
thumbValue: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
description: '...',
|
description: '...',
|
||||||
max: 1,
|
max: 1,
|
||||||
|
|
@ -444,6 +485,15 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
thumbValue: true,
|
thumbValue: true,
|
||||||
values: ['Off', 'On']
|
values: ['Off', 'On']
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
description: '...',
|
||||||
|
arrows: true,
|
||||||
|
max: 10,
|
||||||
|
min: 0,
|
||||||
|
size: 360,
|
||||||
|
thumbSize: 32,
|
||||||
|
thumbValue: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
description: '...',
|
description: '...',
|
||||||
size: 360,
|
size: 360,
|
||||||
|
|
@ -482,7 +532,7 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
description: '...',
|
description: '...',
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
description: '...',
|
description: 'Image select, select one',
|
||||||
items: [
|
items: [
|
||||||
{id: 'a', title: 'Select me'},
|
{id: 'a', title: 'Select me'},
|
||||||
{id: 'b', title: 'or select me'},
|
{id: 'b', title: 'or select me'},
|
||||||
|
|
@ -492,12 +542,47 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
|
||||||
width: 16 // fixme!
|
width: 16 // fixme!
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
description: '...',
|
description: 'Text select with label, select one',
|
||||||
items: [
|
items: [
|
||||||
{id: 'a', title: 'Select me'},
|
{id: 'a', title: 'Select me'},
|
||||||
{id: 'b', title: 'or select me'},
|
{id: 'b', title: 'or select me'},
|
||||||
{id: 'c', 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 = Ox.FormPanel({
|
||||||
form: Object.keys(elements).sort().map(function(name) {
|
form: Object.keys(elements).sort().map(function(name) {
|
||||||
var element = elements[name];
|
var element = elements[name];
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue