jQWidgets Tab Test

by _stephan_

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: 20px;
    left: 20px;
    width: 250px;
    height: 150px;
}

JavaScript

var tabCtrl = $('<div id="myTabCtrl"></div>');
tabCtrl.append('<ul><li>Tab 1</li><li>Tab 2</li></ul>');
tabCtrl.append('<div>Content for Tab 1</div>');
tabCtrl.append('<div>Content for Tab No 2</div>');

$('#myApp').append(tabCtrl);

tabCtrl.jqxTabs({
    width: '100%',
    height: 120
});