1082 lines
40 KiB
JavaScript
1082 lines
40 KiB
JavaScript
|
$(function() {
|
||
|
|
|
||
|
|
var $body = $("body"),
|
||
|
|
$panel = $("<div>")
|
||
|
|
.attr({
|
||
|
|
id: "panel"
|
||
|
|
})
|
||
|
|
.appendTo($body),
|
||
|
|
objects = {
|
||
|
|
"Button": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
style: "symbol",
|
||
|
|
title: "add",
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Symbol Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "add",
|
||
|
|
type: "image",
|
||
|
|
},
|
||
|
|
title: "Image Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "Button",
|
||
|
|
},
|
||
|
|
title: "Text Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
selectable: true,
|
||
|
|
title: "Button",
|
||
|
|
},
|
||
|
|
title: "Selectable Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
disabled: true,
|
||
|
|
title: "Button",
|
||
|
|
},
|
||
|
|
title: "Disabled Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: [
|
||
|
|
{id: "one", title: "expand"},
|
||
|
|
{id: "two", title: "collapse"},
|
||
|
|
],
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Multi-Title Image Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
selectable: true,
|
||
|
|
title: [
|
||
|
|
{id: "off", title: "Off"},
|
||
|
|
{id: "on", title: "On"},
|
||
|
|
],
|
||
|
|
width: 32
|
||
|
|
},
|
||
|
|
title: "Multi-Title Selectable Text Button"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"ButtonGroup": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{ id: "", title: "close" },
|
||
|
|
{ id: "", title: "remove" },
|
||
|
|
{ id: "", title: "add" },
|
||
|
|
{ id: "", title: "check" },
|
||
|
|
{ id: "", title: "edit" },
|
||
|
|
{ id: "", title: "find" },
|
||
|
|
{ id: "", title: "select" },
|
||
|
|
{ id: "", title: "unlock" },
|
||
|
|
{ id: "", title: "lock" },
|
||
|
|
{ id: "", title: "previous" },
|
||
|
|
{ id: "", title: "next" },
|
||
|
|
{ id: "", title: "above" },
|
||
|
|
{ id: "", title: "below" },
|
||
|
|
{ id: "", title: "play" },
|
||
|
|
{ id: "", title: "pause" },
|
||
|
|
{ id: "", title: "mute" },
|
||
|
|
{ id: "", title: "volume" },
|
||
|
|
{ id: "", title: "unmute" },
|
||
|
|
{ id: "", title: "expand" },
|
||
|
|
{ id: "", title: "collapse" },
|
||
|
|
{ id: "", title: "info" },
|
||
|
|
{ id: "", title: "help" },
|
||
|
|
{ id: "", title: "warning" },
|
||
|
|
{ id: "", title: "user" },
|
||
|
|
{ id: "", title: "location" },
|
||
|
|
{ id: "", title: "date" },
|
||
|
|
{ id: "", title: "time" },
|
||
|
|
],
|
||
|
|
id: "buttonGroupImage",
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Image ButtonGroup"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "one",
|
||
|
|
title: "do something",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "two",
|
||
|
|
title: "do something else",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "buttonGroupText"
|
||
|
|
},
|
||
|
|
title: "Text ButtonGroup"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "either",
|
||
|
|
title: "select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or1",
|
||
|
|
title: "or select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or2",
|
||
|
|
title: "or select me",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "selectableButtonGroupOne",
|
||
|
|
selectable: true
|
||
|
|
},
|
||
|
|
title: "Selectable ButtonGroup, select one"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "both",
|
||
|
|
title: "select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "and",
|
||
|
|
title: "and select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or",
|
||
|
|
title: "or select me",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "selectableButtonGroupOneTwo",
|
||
|
|
max: 2,
|
||
|
|
min: 1,
|
||
|
|
selectable: true
|
||
|
|
},
|
||
|
|
title: "Selectable ButtonGroup, select one or two"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "both",
|
||
|
|
title: "select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "and",
|
||
|
|
title: "and select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or",
|
||
|
|
title: "or select me",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "selectableButtonGroupTwo",
|
||
|
|
max: 2,
|
||
|
|
min: 2,
|
||
|
|
selectable: true
|
||
|
|
},
|
||
|
|
title: "Selectable ButtonGroup, select two"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "both",
|
||
|
|
title: "select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "and1",
|
||
|
|
title: "and select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "and2",
|
||
|
|
title: "and select me",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "selectableButtonGroupAny",
|
||
|
|
max: -1,
|
||
|
|
min: 0,
|
||
|
|
selectable: true
|
||
|
|
},
|
||
|
|
title: "Selectable ButtonGroup, select any"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
id: "either",
|
||
|
|
title: "select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or1",
|
||
|
|
title: "or select me",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "or2",
|
||
|
|
title: "or select me",
|
||
|
|
}
|
||
|
|
],
|
||
|
|
id: "tabButtonGroup",
|
||
|
|
selectable: true,
|
||
|
|
style: "tab"
|
||
|
|
},
|
||
|
|
title: "Tab ButtonGroup"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"Checkbox": [
|
||
|
|
{
|
||
|
|
options: {},
|
||
|
|
title: "Checkbox"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "check me",
|
||
|
|
},
|
||
|
|
title: "Checkbox with Title"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
disabled: true,
|
||
|
|
title: "check me",
|
||
|
|
},
|
||
|
|
title: "Disabled Checkbox with Title"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "check me",
|
||
|
|
width: 300,
|
||
|
|
},
|
||
|
|
title: "Checkbox with Title and Width"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"CheckboxGroup": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
checkboxes: [
|
||
|
|
{id: "either", title: "check me"},
|
||
|
|
{id: "or1", title: "or check me"},
|
||
|
|
{id: "or2", title: "or check me"},
|
||
|
|
],
|
||
|
|
id: "CheckboxGroupOne",
|
||
|
|
width: 300
|
||
|
|
},
|
||
|
|
title: "CheckboxGroup, select one"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
checkboxes: [
|
||
|
|
{id: "either", title: "check me"},
|
||
|
|
{id: "or1", title: "or check me"},
|
||
|
|
{id: "or2", title: "or check me"},
|
||
|
|
],
|
||
|
|
id: "CheckboxGroupTwo",
|
||
|
|
max: 2,
|
||
|
|
min: 2,
|
||
|
|
width: 300
|
||
|
|
},
|
||
|
|
title: "CheckboxGroup, select two"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
checkboxes: [
|
||
|
|
{id: "both", title: "check me"},
|
||
|
|
{id: "and1", title: "and check me"},
|
||
|
|
{id: "and2", title: "and check me"},
|
||
|
|
],
|
||
|
|
id: "CheckboxGroupAny",
|
||
|
|
max: -1,
|
||
|
|
min: 0,
|
||
|
|
width: 300
|
||
|
|
},
|
||
|
|
title: "CheckboxGroup, select any"
|
||
|
|
},
|
||
|
|
],
|
||
|
|
"ColorInput": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "colorInput",
|
||
|
|
value: "255, 0, 0"
|
||
|
|
},
|
||
|
|
title: "ColorInput"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"DateInput": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "dateInputShort"
|
||
|
|
},
|
||
|
|
title: "Short DateInput"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
format: "medium",
|
||
|
|
id: "dateInputMedium"
|
||
|
|
},
|
||
|
|
title: "Medium DateInput"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
format: "long",
|
||
|
|
id: "dateInputLong",
|
||
|
|
},
|
||
|
|
title: "Long DateInput"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "dateInputShortValue",
|
||
|
|
value: "2000-01-01"
|
||
|
|
},
|
||
|
|
title: "Short DateInput with Value"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
format: "medium",
|
||
|
|
id: "dateInputMediumWeekday",
|
||
|
|
weekday: true
|
||
|
|
},
|
||
|
|
title: "Medium DateInput with Weekday"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
format: "long",
|
||
|
|
id: "dateInputLongWeekday",
|
||
|
|
weekday: true
|
||
|
|
},
|
||
|
|
title: "Long DateInput with Weekday"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"DateTimeInput": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "dateTimeInputShort"
|
||
|
|
},
|
||
|
|
title: "Short DateTimeInput"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
ampm: true,
|
||
|
|
format: "long",
|
||
|
|
id: "dateTimeInputLong",
|
||
|
|
seconds: true,
|
||
|
|
weekday: true,
|
||
|
|
},
|
||
|
|
title: "Long DateTimeInput"
|
||
|
|
},
|
||
|
|
],
|
||
|
|
"FormElementGroup": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
elements: [
|
||
|
|
new Ox.Select({
|
||
|
|
id: "select",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Find: One"},
|
||
|
|
{id: "two", title: "Find: Two"},
|
||
|
|
{id: "three", title: "Find: Three"}
|
||
|
|
],
|
||
|
|
overlap: "right",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
new Ox.Input({
|
||
|
|
id: "input",
|
||
|
|
width: 128
|
||
|
|
})
|
||
|
|
],
|
||
|
|
id: "formElementGroupSelectInput"
|
||
|
|
},
|
||
|
|
title: "FormElementGroup (Select and Input)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
elements: [
|
||
|
|
new Ox.Input({
|
||
|
|
id: "input_",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
new Ox.Select({
|
||
|
|
id: "select_",
|
||
|
|
items: [
|
||
|
|
{id: "kb", title: "KB"},
|
||
|
|
{id: "mb", title: "MB"},
|
||
|
|
{id: "gb", title: "GB"},
|
||
|
|
{id: "tb", title: "TB"}
|
||
|
|
],
|
||
|
|
overlap: "left",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
float: "right",
|
||
|
|
id: "formElementGroupInputSelect"
|
||
|
|
},
|
||
|
|
title: "FormElementGroup (Input and Select)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
elements: [
|
||
|
|
new Ox.Select({
|
||
|
|
id: "selectOne",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Title"},
|
||
|
|
{id: "two", title: "Date"},
|
||
|
|
{id: "three", title: "Place"}
|
||
|
|
],
|
||
|
|
overlap: "right",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
new Ox.Select({
|
||
|
|
id: "selectTwo",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "is"},
|
||
|
|
{id: "two", title: "is between"},
|
||
|
|
{id: "three", title: "is not between"}
|
||
|
|
],
|
||
|
|
overlap: "right",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
new Ox.InputGroup({
|
||
|
|
id: "input",
|
||
|
|
inputs: [
|
||
|
|
new Ox.DateInput({
|
||
|
|
id: "inputOne",
|
||
|
|
width: {
|
||
|
|
day: 36,
|
||
|
|
month: 36,
|
||
|
|
year: 56
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
new Ox.DateInput({
|
||
|
|
id: "inputTwo",
|
||
|
|
width: {
|
||
|
|
day: 36,
|
||
|
|
month: 36,
|
||
|
|
year: 56
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
separators: [
|
||
|
|
{title: "and", width: 32}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
],
|
||
|
|
id: "formElementGroupSelectSelectInput"
|
||
|
|
},
|
||
|
|
title: "FormElementGroup (two Selects, one Input)"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"Input": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
value: "Value"
|
||
|
|
},
|
||
|
|
title: "Input"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
disabled: true,
|
||
|
|
value: "Disabled"
|
||
|
|
},
|
||
|
|
title: "Disabled Input"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
placeholder: "Placeholder"
|
||
|
|
},
|
||
|
|
title: "Input with Placeholder"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
label: "Label"
|
||
|
|
},
|
||
|
|
title: "Input with Label"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
clear: true
|
||
|
|
},
|
||
|
|
title: "Input with Clear Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
clear: true,
|
||
|
|
label: "Label",
|
||
|
|
placeholder: "Placeholder",
|
||
|
|
width: 256
|
||
|
|
},
|
||
|
|
title: "Input with Label, Placeholder and Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
type: "password"
|
||
|
|
},
|
||
|
|
title: "Password Input"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
clear: true,
|
||
|
|
placeholder: "Password",
|
||
|
|
type: "password"
|
||
|
|
},
|
||
|
|
title: "Password Input with Placeholder"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
type: "float"
|
||
|
|
},
|
||
|
|
title: "Float Input (0.0 - 100.0)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
max: 255,
|
||
|
|
type: "integer"
|
||
|
|
},
|
||
|
|
title: "Integer Input (0 - 255)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
clear: true,
|
||
|
|
id: "integerClear",
|
||
|
|
max: 255,
|
||
|
|
type: "integer"
|
||
|
|
},
|
||
|
|
title: "Integer Input with Clear Button"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
arrows: true,
|
||
|
|
id: "integerArrows",
|
||
|
|
max: 255,
|
||
|
|
type: "integer"
|
||
|
|
},
|
||
|
|
title: "Integer Input with Arrows"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: $.map(Ox.getCountries(), function(v, i) {
|
||
|
|
return v.name;
|
||
|
|
}),
|
||
|
|
autocompleteReplace: true,
|
||
|
|
id: "autocompleteReplace"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Replace"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: $.map(Ox.getCountries(), function(v, i) {
|
||
|
|
return v.name;
|
||
|
|
}),
|
||
|
|
autocompleteReplace: true,
|
||
|
|
autocompleteReplaceCorrect: true,
|
||
|
|
id: "autocompleteReplaceCorrect"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Replace and Correct"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: $.map(Ox.getCountries(), function(v, i) {
|
||
|
|
return v.name;
|
||
|
|
}),
|
||
|
|
autocompleteSelect: true,
|
||
|
|
autocompleteSelectHighlight: true,
|
||
|
|
id: "autocompleteSelect"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Select"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: $.map(Ox.getCountries(), function(v, i) {
|
||
|
|
return v.name;
|
||
|
|
}),
|
||
|
|
autocompleteReplace: true,
|
||
|
|
autocompleteSelect: true,
|
||
|
|
autocompleteSelectHighlight: true,
|
||
|
|
id: "autocompleteReplaceSelect"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Replace and Select"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: $.map(Ox.getCountries(), function(v, i) {
|
||
|
|
return v.name;
|
||
|
|
}),
|
||
|
|
autocompleteReplace: true,
|
||
|
|
autocompleteReplaceCorrect: true,
|
||
|
|
autocompleteSelect: true,
|
||
|
|
autocompleteSelectHighlight: true,
|
||
|
|
id: "autocompleteReplaceCorrectSelect"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Replace, Correct and Select"
|
||
|
|
},
|
||
|
|
/*
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocomplete: function(value, callback) {
|
||
|
|
callback([value]);
|
||
|
|
},
|
||
|
|
autocompleteSelect: true,
|
||
|
|
autocompleteSelectHighlight: true,
|
||
|
|
id: "autocompleteFunction"
|
||
|
|
},
|
||
|
|
title: "Autocomplete with Select (Function)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocorrect: /\d/,
|
||
|
|
},
|
||
|
|
title: "Autocorrect with RegExp (Integer)"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
autocorrect: function(value, blur, callback) {
|
||
|
|
var length = value.length;
|
||
|
|
value = $.map(value.toLowerCase().split(""), function(v, i) {
|
||
|
|
Ox.print(new RegExp("[\d" + ((i == 0 || (i == length - 1 && blur)) ? "" : "\.") + "]"))
|
||
|
|
if (new RegExp("[\\d" + ((i == 0 || (i == length - 1 && blur) || i != value.indexOf(".")) ? "" : "\\.") + "]")(v)) {
|
||
|
|
return v;
|
||
|
|
} else {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}).join("");
|
||
|
|
callback(blur ? parseFloat(value) : value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
title: "Autocorrect with Function (Float)"
|
||
|
|
},
|
||
|
|
*/
|
||
|
|
],
|
||
|
|
"InputGroup": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "inputGroup",
|
||
|
|
inputs: [
|
||
|
|
Ox.Input({id: "width", placeholder: "Width", width: 64}),
|
||
|
|
Ox.Input({id: "height", placeholder: "Height", width: 64})
|
||
|
|
],
|
||
|
|
separators: [
|
||
|
|
{title: "x", width: 16}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: "InputGroup"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "inputGroupWithWidth",
|
||
|
|
inputs: [
|
||
|
|
Ox.Input({id: "width", placeholder: "Width"}),
|
||
|
|
Ox.Input({id: "height", placeholder: "Height"})
|
||
|
|
],
|
||
|
|
separators: [
|
||
|
|
{title: "x", width: 16}
|
||
|
|
],
|
||
|
|
width: 128
|
||
|
|
},
|
||
|
|
title: "InputGroup with Width"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "inputGroupUsernamePassword",
|
||
|
|
inputs: [
|
||
|
|
Ox.Input({clear: true, id: "username", label: "Username", labelWidth: 80, placeholder: "Username"}),
|
||
|
|
Ox.Input({clear: true, id: "password", label: "Password", labelWidth: 80, placeholder: "Password", type: "password"})
|
||
|
|
],
|
||
|
|
separators: [
|
||
|
|
{title: "", width: 8},
|
||
|
|
],
|
||
|
|
width: 400
|
||
|
|
},
|
||
|
|
title: "Complex InputGroup"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "inputGroupTest",
|
||
|
|
inputs: [
|
||
|
|
Ox.Select({
|
||
|
|
id: "select",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "One"},
|
||
|
|
{id: "two", title: "Two"},
|
||
|
|
{id: "three", title: "Three"}
|
||
|
|
],
|
||
|
|
overlap: "right",
|
||
|
|
width: 128
|
||
|
|
}),
|
||
|
|
Ox.Input({
|
||
|
|
id: "input",
|
||
|
|
placeholder: "Placeholder",
|
||
|
|
width: 128
|
||
|
|
})
|
||
|
|
],
|
||
|
|
separators: [
|
||
|
|
{title: "", width: -8}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"Label": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "Title"
|
||
|
|
},
|
||
|
|
title: "Label"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
disabled: true,
|
||
|
|
title: "Title"
|
||
|
|
},
|
||
|
|
title: "Disabled Label"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
title: "Title",
|
||
|
|
width: 128
|
||
|
|
},
|
||
|
|
title: "Label with Width"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
textAlign: "right",
|
||
|
|
title: "Title",
|
||
|
|
width: 128
|
||
|
|
},
|
||
|
|
title: "Right-Aligned Label"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"PlaceInput": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "placeInput"
|
||
|
|
},
|
||
|
|
title: "PlaceInput"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"Range": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "range"
|
||
|
|
},
|
||
|
|
title: "Range"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
arrows: true,
|
||
|
|
id: "rangeArrows"
|
||
|
|
},
|
||
|
|
title: "Range with Arrows"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
arrows: true,
|
||
|
|
id: "rangeThumbValue",
|
||
|
|
max: 10,
|
||
|
|
min: 0,
|
||
|
|
thumbSize: 32,
|
||
|
|
thumbValue: true,
|
||
|
|
},
|
||
|
|
title: "Range with Thumb Value"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeValueNames",
|
||
|
|
max: 1,
|
||
|
|
min: 0,
|
||
|
|
size: 48,
|
||
|
|
thumbSize: 32,
|
||
|
|
thumbValue: true,
|
||
|
|
valueNames: ["Off", "On"]
|
||
|
|
},
|
||
|
|
title: "Range with Value Names"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeTrackColors",
|
||
|
|
max: 255,
|
||
|
|
min: 0,
|
||
|
|
size: 400,
|
||
|
|
thumbSize: 40,
|
||
|
|
thumbValue: true,
|
||
|
|
trackColors: [
|
||
|
|
"rgb(0, 0, 0)",
|
||
|
|
"rgb(255, 255, 255)"
|
||
|
|
],
|
||
|
|
},
|
||
|
|
title: "Range with Track Colors"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeTrackColorsColor",
|
||
|
|
max: 359,
|
||
|
|
min: 0,
|
||
|
|
size: 400,
|
||
|
|
thumbSize: 40,
|
||
|
|
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)"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: "Range with Track Colors"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeTrackImage",
|
||
|
|
size: 400,
|
||
|
|
trackImages: ["png/timeline.png"]
|
||
|
|
},
|
||
|
|
title: "Range with Track Image"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeTrackImages",
|
||
|
|
max: 5,
|
||
|
|
size: 386,
|
||
|
|
thumbValue: true,
|
||
|
|
trackImages: [
|
||
|
|
"png/red.png",
|
||
|
|
"png/yellow.png",
|
||
|
|
"png/green.png",
|
||
|
|
"png/cyan.png",
|
||
|
|
"png/blue.png",
|
||
|
|
"png/magenta.png"
|
||
|
|
],
|
||
|
|
valueNames: ["Red", "Yellow", "Green", "Cyan", "Blue", "Magenta"]
|
||
|
|
},
|
||
|
|
title: "Range with Track Images"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "rangeTrackImages",
|
||
|
|
max: 9,
|
||
|
|
size: 240,
|
||
|
|
trackImages: [
|
||
|
|
"jpg/Children's Games.jpg",
|
||
|
|
"jpg/Dulle Griet.jpg",
|
||
|
|
"jpg/Landscape With the Fall of Icarus.jpg",
|
||
|
|
"jpg/Netherlandish Proverbs.jpg",
|
||
|
|
"jpg/The Fight Between Carnival and Lent.jpg",
|
||
|
|
"jpg/The Hunters in the Snow.jpg",
|
||
|
|
"jpg/The Procession to Calvary.jpg",
|
||
|
|
"jpg/The Tower of Babel.jpg",
|
||
|
|
"jpg/The Triumph of Death.jpg",
|
||
|
|
"jpg/Winter Landscape With a Bird Trap.jpg",
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: "Range with Track Images"
|
||
|
|
},
|
||
|
|
],
|
||
|
|
"Select": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "imageSelectOne",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "select me"},
|
||
|
|
{id: "two", title: "or select me"},
|
||
|
|
{id: "three", title: "or select me"}
|
||
|
|
],
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Image Select, select one"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "imageSelectTwo",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "select me"},
|
||
|
|
{id: "two", title: "or select me"},
|
||
|
|
{id: "three", title: "or select me"}
|
||
|
|
],
|
||
|
|
max: 2,
|
||
|
|
min: 2,
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Image Select, select two"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "imageSelectAny",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "select me"},
|
||
|
|
{id: "two", title: "and select me"},
|
||
|
|
{id: "three", title: "and select me"}
|
||
|
|
],
|
||
|
|
max: -1,
|
||
|
|
min: 0,
|
||
|
|
type: "image"
|
||
|
|
},
|
||
|
|
title: "Image Select, select any"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "textSelectOne",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Item One"},
|
||
|
|
{id: "two", title: "Item Two"},
|
||
|
|
{id: "three", title: "Item Three"}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
title: "Text Select, select one"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "textSelectAny",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Item One"},
|
||
|
|
{id: "two", title: "Item Two"},
|
||
|
|
{id: "three", title: "Item Three"}
|
||
|
|
],
|
||
|
|
max: -1,
|
||
|
|
min: 0,
|
||
|
|
title: "Title..."
|
||
|
|
},
|
||
|
|
title: "Text Select, select any"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "textSelectNone",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Item One"},
|
||
|
|
{id: "two", title: "Item Two"},
|
||
|
|
{id: "three", title: "Item Three"}
|
||
|
|
],
|
||
|
|
selectable: false,
|
||
|
|
title: "Title..."
|
||
|
|
},
|
||
|
|
title: "Text Select, select none"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "textSelectWidth",
|
||
|
|
items: [
|
||
|
|
{id: "one", title: "Item One"},
|
||
|
|
{id: "two", title: "Item Two"},
|
||
|
|
{id: "three", title: "Item Three Has a Long Title"}
|
||
|
|
],
|
||
|
|
width: 128
|
||
|
|
},
|
||
|
|
title: "Text Select with Width"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
"TimeInput": [
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "timeInput",
|
||
|
|
width: 72
|
||
|
|
},
|
||
|
|
title: "TimeInput"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "timeInputSeconds",
|
||
|
|
seconds: true,
|
||
|
|
width: 112
|
||
|
|
},
|
||
|
|
title: "TimeInput with Seconds"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "timeInputMilliseconds",
|
||
|
|
milliseconds: true,
|
||
|
|
//width: 168
|
||
|
|
},
|
||
|
|
title: "TimeInput with Milliseconds"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
ampm: true,
|
||
|
|
id: "timeInputAmPm",
|
||
|
|
seconds: true,
|
||
|
|
width: 152
|
||
|
|
},
|
||
|
|
title: "TimeInput with am/pm"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
options: {
|
||
|
|
id: "timeInputValue",
|
||
|
|
seconds: true,
|
||
|
|
value: "00:00:00",
|
||
|
|
width: 112
|
||
|
|
},
|
||
|
|
title: "TimeInput with Value"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
$.each(objects, function(object, elements) {
|
||
|
|
var $div = $("<div>").appendTo($panel);
|
||
|
|
new Ox.Label({
|
||
|
|
title: "Ox." + object,
|
||
|
|
width: 840
|
||
|
|
})
|
||
|
|
.addClass("margin")
|
||
|
|
.appendTo($div);
|
||
|
|
$("<br clear=\"both\">").appendTo($panel);
|
||
|
|
// if (object != "PlaceInput") return;
|
||
|
|
$.each(elements, function(i, element) {
|
||
|
|
var $div = $("<div>").appendTo($panel),
|
||
|
|
$label, $element, $button;
|
||
|
|
$label = Ox.Label({
|
||
|
|
textAlign: "right",
|
||
|
|
title: element.title,
|
||
|
|
width: 256
|
||
|
|
})
|
||
|
|
.addClass("margin")
|
||
|
|
.appendTo($div);
|
||
|
|
try {
|
||
|
|
$label.attr({
|
||
|
|
title: "Ox." + object + "(" + JSON.stringify(element.options) + ")"
|
||
|
|
});
|
||
|
|
} catch(error) {
|
||
|
|
|
||
|
|
}
|
||
|
|
$element = new Ox[object](element.options)
|
||
|
|
.addClass("margin")
|
||
|
|
.appendTo($div);
|
||
|
|
if (object != "Button" && object != "Label") {
|
||
|
|
$button = new Ox.Button({
|
||
|
|
id: "id" + Ox.uid(),
|
||
|
|
title: "Value"
|
||
|
|
})
|
||
|
|
.addClass("margin")
|
||
|
|
.bindEvent("click", function() {
|
||
|
|
var value = $element.options("value"),
|
||
|
|
$dialog = new Ox.Dialog({
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
click: function() { $dialog.close(); },
|
||
|
|
id: "close",
|
||
|
|
title: "Close"
|
||
|
|
}
|
||
|
|
],
|
||
|
|
height: 128,
|
||
|
|
id: "value",
|
||
|
|
title: "Value",
|
||
|
|
width: 256
|
||
|
|
})
|
||
|
|
.append(Ox.isUndefined(value) ? "undefined" : value)
|
||
|
|
.open();
|
||
|
|
})
|
||
|
|
.appendTo($div);
|
||
|
|
}
|
||
|
|
$("<br clear=\"both\">").appendTo($panel);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
$("<div>")
|
||
|
|
.css({
|
||
|
|
height: "256px"
|
||
|
|
})
|
||
|
|
.appendTo($panel);
|
||
|
|
|
||
|
|
});
|