jQWidgets docking tests

by _stephan_

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/jqxwindow.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdocking.js"></script>
<div id="myApp"></div>

CSS

body {
    background-color: #eea;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background-color: #ffd;
}

JavaScript

$('#myApp').append('<div id="dock1" />');
$('#myApp').append('<div id="dock2" />');

$('#dock1').append('<div id="panel1" />');
$('#dock1').append('<div id="panel2" />');
$('#dock2').append('<div id="panel3" />');

$('#panel1').append('<div id="window1"><div>Header 1</div><div>Content 1</div></div>');
$('#panel2').append('<div id="window2" style="width:150px"><div>Header 2</div><div>Content 2</div></div>');
$('#panel3').append('<div id="window3"><div>Header 3</div><div>Content 3</div></div>');

$("#dock1").jqxDocking({
    width: "400",
    mode: 'docked',
    orientation: 'horizontal',
    //orientation: 'vertical',
});
$("#dock2").jqxDocking({
    width: "400",
    mode: 'docked',
    orientation: 'horizontal',
    //orientation: 'vertical',
});