jQWidgets Splitter Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnavigationbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdockpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
<div id="myApp"></div>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}
#myDialog {
    height: 100%;
}

JavaScript

$('#myApp').append('<div id="topcontent" style="height:100%"></div>');

$('#topcontent').append('<div dock="top">Test Test Test</div>');
$('#topcontent').append('<div dock="top"><div id="myDialog"></div></div>');
$("#topcontent").jqxDockPanel({
    width: "100%",
});

$('#myDialog').append('<div id="split1"/>');
$('#split1').append('<div><div id="split2"/></div>');
$('#split2').append('<div id="panel1">Panel 1</div>');
$('#split2').append('<div><div id="split3"/></div>');
$('#split3').append('<div id="panel2">Panel 2</div>');
$('#split3').append('<div id="panel3">Panel 3</div>');
$('#split1').append('<div><div id="split4"/></div>');
$('#split4').append('<div id="panel4">Panel 4</div>');
$('#split4').append('<div><div id="split5"/></div>');
$('#split5').append('<div id="panel5">Panel 5</div>');
$('#split5').append('<div><div id="split6"/></div>');
$('#split6').append('<div id="panel6">Panel 6</div>');
$('#split6').append('<div id="panel7">Panel 7</div>');

$("#split1").jqxSplitter({
    width: "100%",
    height: "100%",
    orientation: 'horizontal',
    //showSplitBar: false,
    splitBarSize: 0,
    panels: [{
        size: '100%'
    }]
});



$("#split5").jqxSplitter({
    orientation: 'vertical',
    panels: [{
        size: '30%'
    }]
});

$("#split6").jqxSplitter({
    orientation: 'vertical',
    panels: [{
        size: '50%'
    }]
});
$("#split7").jqxSplitter({
    orientation: 'vertical',
    panels: [{
        size: '20%'
    }]
});