jQWidgets dockPanel 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>
<div id="myApp"></div>

CSS

* {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
}

#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
}

JavaScript

console.info('App Start ...');

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

$('#jqxdock').append('<div dock="top" style="background-color:#ff0"><h3>Header</h3></div>');
$('#jqxdock').append('<div dock="bottom" style="background-color:#0f0">Footer</div>');
$('#jqxdock').append('<div id="center" style="background-color:#f00"></div>');

$('#center').append('<div id="jqxpanel">Content Area<br></div>');

$("#jqxpanel").jqxPanel({
      width : "100%",
      height : "100%",
});

$("#jqxdock").jqxDockPanel({
    width: "100%",
});

$("#jqxpanel").jqxPanel('append', $("#jqxpanel").attr('style'));