1. Add references to the JavaScript and CSS files:
<link rel="stylesheet" href="jqx.base.css" type="text/css" />
<link rel="stylesheet" href="jqx.summer.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqxexpander.js"></script>
<script type="text/javascript" src="jqxnavigationbar.js"></script>
2. Add the HTML structure for the Menu and Navigation Bar widgets in the document’s body:
<div id='jqxMenu'>
<ul>
<li>Expand</li>
<li>Collapse</li>
</ul>
</div>
<div id="jqxNavigationBar">
<div>
Contacts
</div>
<div>
<div style="padding: 15px">Business Cards</div>
</div>
<div>
Tasks
</div>
<div>
<div style="padding: 15px">Phone list</div>
</div>
<div>
Notes
</div>
<div>
<div style="padding: 15px">Icons</div>
</div>
</div>
The first div tag represents the context menu’s html structure. The second div with id “jqxNavigationBar” contains the jqxNavigationBar html structure.
3.Initialize the Context Menu:
var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', height: '56px', autoOpenPopup: false, mode: 'popup', theme: ‘summer’ });
In order to use the jqxMenu widget as a context menu, we set its ‘mode’ property to ‘popup’. The ‘autoOpenPopup’ property specifies whether the context menu should replace the default browser’s context menu. In this scenario, we want to open the context menu only when the user right clicks an item in the Navigation Bar.
4.Initialize the Navigation Bar:
$("#jqxNavigationBar").jqxNavigationBar({ width: 250, height: 420, theme: ‘summer’, expandMode: 'multiple' });
5. Open the Context Menu when the user right clicks a navigation bar item and save the clicked item’s index.
$(".jqx-expander-header").bind('mousedown', function (event) {
var rightClick = isRightClick(event);
if (rightClick) {
var scrollTop = $(window).scrollTop(),
scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
// save the index of the clicked item.
itemIndex = getItemIndex($(event.target));
}
});
function getItemIndex(item) {
var items = $('#jqxNavigationBar').find('.jqx-expander-header');
for (var i = 0; i < items.length; i += 1) {
if ($(items[i]).text() === item.text()) {
return i;
}
}
return -1;
}
6. Select the ‘jqxMenu’ element and trigger the ‘itemclick’ event. The ‘itemclick’ event is raised when a menu item is clicked. In the event handler we call either ‘expandAt’ or ‘collapseAt’ method to expand or collapse a Navigation Bar item.
$("#jqxMenu").bind('itemclick', function (event) {
var item = $(event.args).text();
switch (item) {
case "Expand":
$('#jqxNavigationBar').jqxNavigationBar('expandAt', itemIndex);
break;
case "Collapse":
$('#jqxNavigationBar').jqxNavigationBar('collapseAt', itemIndex);
break;
}
});
