jQWidgets Tab in Panel Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id="myApp"></div>

CSS

body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 350px;
    height: 200px;
}

JavaScript

var myPanel = $('<div id="myPanel">My Panel</div>');
$('#myApp').append(myPanel);

var myTab = $('<div id="myTab"></div>');
myTab.append('<ul><li>Tab Page 1</li><li>Tab Page 2</li></ul>');
myTab.append('<div>Tab 1 Content<br>bla bla bla</div>');
myTab.append('<div>Tab 2 Content<br>bla bla bla</div>');
myPanel.append(myTab);

// compensate for the 1px border around the jqxTab
myTab.wrap('<div style="margin: 0px 2px 2px 0px"></div>');

myPanel.append('<div>More Content ...<br>More Content ...</div>');
myPanel.append('<div>More Content ...<br>More Content ...</div>');
myPanel.append('<div>More Content ...<br>More Content ...</div>');
myPanel.append('<div>More Content ...<br>More Content ...</div>');

myTab.jqxTabs({
    width: '100%'
});

myPanel.jqxPanel({
    width: '100%',
    height: '100%'
});