Ox.ArrayInput
allows you to enter an array of strings.',
+ description: 'Ox.ArrayInput
'
+ + 'allows you to enter an array of strings.',
items: [
Ox.ArrayInput({
- id: 'names',
+ id: 'a',
+ description: 'A: {max: 3}
',
label: 'Enter up to 3 names',
max: 3,
width: 256
@@ -27,24 +34,20 @@ Ox.load('UI', function() {
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: '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',
@@ -86,15 +89,25 @@ Ox.load('UI', function() {
}
},
{
- id: 'checkboxes',
- title: 'Checkboxes',
+ 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'},
@@ -127,6 +140,91 @@ Ox.load('UI', function() {
return true;
}
},
+ {
+ id: 'colorinput',
+ title: 'ColorInput',
+ description: 'Ox.ColorInput
',
+ 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: 'Ox.DateInput
',
+ items: [
+ Ox.DateInput({
+ id: 'A',
+ description: 'A {format: "short"}
',
+ 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: 'Ox.DateTimeInput
',
+ items: [
+ Ox.DateTimeInput({
+ id: 'A',
+ description: 'A {format: "short"}
',
+ 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',
@@ -134,6 +232,59 @@ Ox.load('UI', function() {
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() {
@@ -198,6 +349,40 @@ Ox.load('UI', function() {
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() {