0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add form demo

Browse source
This commit is contained in:
rolux 2011-05-21 19:56:40 +02:00
parent 6a33b9cb97
commit c86c7d598d
2 changed files with 117 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/form/index.html Normal file
View 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
View 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);
});