2011-01-04 17:16:25 +00:00
|
|
|
<!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"/>
|
2011-04-22 23:07:55 +00:00
|
|
|
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
2011-01-04 17:16:25 +00:00
|
|
|
<script>
|
2011-04-22 23:07:55 +00:00
|
|
|
Ox.UI(function() {
|
2011-01-04 17:16:25 +00:00
|
|
|
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>
|
2011-04-22 23:07:55 +00:00
|
|
|
</html>
|
