<!DOCTYPE HTML> <html> <head> <title>ox.js SplitPanel Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../../dev/Ox.js"></script> <script> Ox.load('UI', {debug: true}, 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.SplitPanel({ elements: [ { collapsible: true, element: new Ox.Element().options({id: 'leftleft'}).css({background: 'red'}), resizable: true, resize: [32, 64, 96], size: 64 }, { element: new Ox.Element().options({id: 'leftright'}).css({background: 'magenta'}), size: 'auto' } ], id: 'right', orientation: 'horizontal' }), 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: [ { element: new Ox.Element().options({id: 'righttop'}).css({background: 'cyan'}), size: 'auto' }, { collapsible: true, element: new Ox.Element().options({id: 'rightbottom'}).css({background: 'blue'}), 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>