CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add demos

Browse Source
This commit is contained in:
j 2011-01-04 17:16:25 +00:00
parent 15196d522c
commit b4d083be74
3 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
build/png/ox.ui.classic/symbolSet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
build/png/ox.ui.modern/symbolSet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

85
demos/splitpanel/index.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<html>
<head>
<title>ox.js SplitPanel Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script>
$(function() {
new Ox.SplitPanel({
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'top'}).css({background: 'yellow'}).html('top').bindEvent('resize', function() { Ox.print('resize top') }),
resizable: true,
resize: [64, 128, 192],
size: 128
},
{
element: new Ox.SplitPanel({
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'left'}).css({background: 'red'}).html('left'),
resizable: true,
resize: [128, 256, 384],
size: 256
},
{
element: new Ox.Element().options({id: 'center'}).css({background: 'green', overflowY: 'auto'}).html(Ox.repeat('center<br/>', 100)),
size: 'auto'
},
{
collapsible: true,
element: new Ox.SplitPanel({
elements: [
{
collapsible: true,
element: new Ox.Element().options({id: 'righttop'}).css({background: 'cyan'}),
resizable: true,
resize: [32, 64, 96],
size: 64
},
{
element: new Ox.Element().options({id: 'rightmiddle'}).css({background: 'blue'}),
size: 'auto'
},
{
collapsible: true,
element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'magenta'}),
resizable: true,
resize: [32, 64, 96],
size: 64
},
],
id: 'right',
orientation: 'vertical'
}),
resizable: true,
resize: [128, 256, 384],
size: 256
},
],
id: 'middle',
orientation: 'horizontal'
}),
size: 'auto'
},
{
collapsible: true,
element: new Ox.Element().options({id: 'bottom'}).css({background: 'orange'}).html('bottom'),
resizable: true,
resize: [64, 128, 192],
size: 128
},
],
orientation: 'vertical'
}).appendTo($('body'));
});
</script>
</head>
<body></body>
</html>