107 lines
2.9 KiB
JavaScript
107 lines
2.9 KiB
JavaScript
|
Ox.load('UI', {debug: true}, function() {
|
||
|
|
|
||
|
|
var $items = [
|
||
|
|
Ox.Input({
|
||
|
|
id: 'name',
|
||
|
|
label: 'Name',
|
||
|
|
labelWidth: 64,
|
||
|
|
width: 240
|
||
|
|
}),
|
||
|
|
Ox.Input({
|
||
|
|
id: 'geoname',
|
||
|
|
label: 'Geoname',
|
||
|
|
labelWidth: 64,
|
||
|
|
width: 240
|
||
|
|
}),
|
||
|
|
Ox.ArrayInput({
|
||
|
|
id: 'alternativeNames',
|
||
|
|
label: 'Alternative Names',
|
||
|
|
max: 10,
|
||
|
|
//sort: true,
|
||
|
|
values: [],
|
||
|
|
width: 240
|
||
|
|
}),
|
||
|
|
Ox.Input({
|
||
|
|
decimals: 8,
|
||
|
|
id: 'lat',
|
||
|
|
label: 'Latitude',
|
||
|
|
labelWidth: 80,
|
||
|
|
max: Ox.MAX_LATITUDE,
|
||
|
|
min: Ox.MIN_LATITUDE,
|
||
|
|
type: 'float',
|
||
|
|
width: 240
|
||
|
|
}),
|
||
|
|
Ox.Input({
|
||
|
|
decimals: 8,
|
||
|
|
id: 'lng',
|
||
|
|
label: 'Longitude',
|
||
|
|
labelWidth: 80,
|
||
|
|
max: 180,
|
||
|
|
min: -180,
|
||
|
|
type: 'float',
|
||
|
|
width: 240
|
||
|
|
})
|
||
|
|
],
|
||
|
|
$bar = Ox.Bar({
|
||
|
|
size: 24
|
||
|
|
}),
|
||
|
|
$button = Ox.Button({
|
||
|
|
id: 'submit',
|
||
|
|
title: 'check',
|
||
|
|
type: 'image'
|
||
|
|
})
|
||
|
|
.css({
|
||
|
|
float: 'right',
|
||
|
|
margin: '4px'
|
||
|
|
})
|
||
|
|
.bindEvent({
|
||
|
|
click: function() {
|
||
|
|
$foo.html(JSON.stringify($form.values()))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.appendTo($bar),
|
||
|
|
$container = Ox.Container(),
|
||
|
|
$foo = Ox.Element(),
|
||
|
|
$form = Ox.Form({
|
||
|
|
items: $items
|
||
|
|
})
|
||
|
|
.css({
|
||
|
|
padding: '8px'
|
||
|
|
})
|
||
|
|
.appendTo($container);
|
||
|
|
|
||
|
|
Ox.SplitPanel({
|
||
|
|
elements: [
|
||
|
|
{
|
||
|
|
collapsible: true,
|
||
|
|
element: Ox.SplitPanel({
|
||
|
|
elements: [
|
||
|
|
{
|
||
|
|
element: $container
|
||
|
|
},
|
||
|
|
{
|
||
|
|
element: $bar,
|
||
|
|
size: 24
|
||
|
|
}
|
||
|
|
],
|
||
|
|
orientation: 'vertical'
|
||
|
|
})
|
||
|
|
.bindEvent({
|
||
|
|
resize: function(foo, size) {
|
||
|
|
$items.forEach(function($item) {
|
||
|
|
$item.options({width: size - 16});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
resizable: true,
|
||
|
|
resize: [128, 256, 384],
|
||
|
|
size: 256
|
||
|
|
},
|
||
|
|
{
|
||
|
|
element: $foo
|
||
|
|
}
|
||
|
|
],
|
||
|
|
orientation: 'horizontal'
|
||
|
|
}).appendTo(Ox.UI.$body);
|
||
|
|
|
||
|
|
});
|