add form demo
This commit is contained in:
parent
6a33b9cb97
commit
c86c7d598d
2 changed files with 117 additions and 0 deletions
10
demos/form/index.html
Normal file
10
demos/form/index.html
Normal file
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>OxJS Form Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/form.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
107
demos/form/js/form.js
Normal file
107
demos/form/js/form.js
Normal file
|
@ -0,0 +1,107 @@
|
|||
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);
|
||||
|
||||
});
|
Loading…
Reference in a new issue