jQWidgets NavigationBar Test

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

CSS

#myApp{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 560px;
}

JavaScript

var navbar = $('<div id="navBar" />');
$('#myApp').append(navbar);
    
$('#navBar').jqxNavigationBar({
    width: "100%",
    expandMode: 'toggle'
});

$('#navBar').jqxNavigationBar('add', 'Header', 'Content');

/*navbar.append('<div id="navHdr1">Nav Header 1</div>');
navbar.append('<div id="navBody1"></div>');
navbar.append('<div id="navHdr2">Nav Header 2</div>');
navbar.find('#navBody1').append(list1);
navbar.append('<div id="navBody2"></div>');
var list1 = $('<div id="jqxlistbox1"></div>');
var source = [
    "Affogato",
    "Americano",
    "Bicerin",
    "Café au lait",
    "Caffé Latte"];

list1.jqxListBox({
    source: source,
    width: "95%",
    autoHeight : true
});*/