j
14 years ago
3 changed files with 85 additions and 0 deletions
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.9 KiB |
@ -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> |
Loading…
Reference in new issue