<!DOCTYPE HTML> <html> <head> <title>OxJS SplitPanel Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript" src="../../build/Ox.js"></script> <script> Ox.load('UI', {debug: true}, function() { function element(options, css) { return Ox.extend({ element: Ox.Element().html(JSON.stringify(options)) }, options); } new Ox.SplitPanel_({ elements: [ { element: Ox.Element() .css({backgroundColor: 'rgb(0, 0, 255)'}) .html('{size: 16}'), size: 16 }, { element: new Ox.SplitPanel_({ elements: [ { collapsible: true, element: new Ox.Element() .css({backgroundColor: 'rgb(0, 255, 0)'}) .html('{collapsible: true, size: 128, resizable: true, resize:[64, 128, 192]}'), size: 128, resizable: true, resize: [64, 128, 192] }, { element: new Ox.SplitPanel_({ elements: [ { collapsible: true, element: Ox.Element() .css({backgroundColor: 'rgb(128, 128, 255)'}) .html('{collapsible: true, size: "10%"}'), size: 24 }, { element: five = new Ox.SplitPanel_({ elements: [ { element: Ox.Element() .css({backgroundColor: 'rgb(255, 64, 255)'}) .bindEvent('anyclick', function() { five.resizeElement(0, '10%'); }), }, { element: Ox.Element() .css({backgroundColor: 'rgb(255, 96, 255)'}) }, { element: Ox.Element() .css({backgroundColor: 'rgb(255, 128, 255)'}) .bindEvent('anyclick', function() { five.replaceElement(2, Ox.Element()) }) }, { element: new Ox.TreeList({ data: Ox.COUNTRIES }) }, { element: Ox.Element() .css({ //position: 'absolute', //display: 'block', //top: 15, //bottom: 0, //height: '200px', overflowY: 'scroll' }) .append( Ox.Element() .css({ height: '1000px', backgroundColor: 'rgb(255, 192, 255)' }) ) } ], orientation: 'horizontal' }) }, { collapsible: true, element: Ox.Element() .css({backgroundColor: 'rgb(255, 128, 128)'}), size: 24 } ], orientation: 'vertical' }) }, { collapsible: true, element: new Ox.Element() .css({backgroundColor: 'rgb(255, 255, 0)'}) .html('{collapsible: true, size: "10%", resizable: true, resize: ["5%", "10%", "15%"]}'), size: 256 } ], orientation: 'horizontal' }) }, { element: Ox.Element() .css({backgroundColor: 'rgb(255, 0, 0)'}), size: 16 } ], orientation: 'vertical' }) .css({ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }) .appendTo($('body')); }); </script> </head> <body></body> </html>