<!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/OxUI.js"></script> <script> Ox.UI(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>