LIDOR SYSTEMS

Advanced User Interface Controls and Components

Handling Events in Menu for jQuery

Created: 05 September 2014

Whenever a menu item is added, removed or a submenu is shown or hidden, a corresponding event is fired. Here is a list of available events supported in Menu widget. By creating handlers for these events, we can customize the behavior of the menu.

Event log:

Menu is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

How to Handle the Click Event

Each menu item can display a hyperlink, which by default when clicked can open a new page. In cases when a menu item doesn’t contain a hyperlink, in order to process clicks we need to handle the itemclick event.

$(document).ready(function(){

var $menuBar = $('#menu').menu();

$menu.on({

"itemclick": function(e){

alert("item " + e.object.text + " is clicked");

}

});

});

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<link rel="stylesheet" href="css/integralui.menu.css" />

<link rel="stylesheet" href="css/themes/theme-dark.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.menu.min.js"></script>

</head>

<body>

<div id="menu" class="widget">

<ul>

<li><span>MenuItem1</span></li>

<li><span>MenuItem2</span>

<ul>

<li><span>MenuItem21</span></li>

<li><span>MenuItem22</span></li>

<li><span>MenuItem23</span>

<ul>

<li><span>MenuItem231</span></li>

<li ><span>MenuItem232</span>

<ul>

<li><span>MenuItem2321</span></li>

<li><span>MenuItem2322</span></li>

</ul>

</li>

<li><span>MenuItem233</span></li>

</ul>

</li>

<li><span>MenuItem24</span></li>

</ul>

</li>

<li ><span>MenuItem3</span>

<ul>

<li><span>MenuItem31</span></li>

<li><span>MenuItem32</span></li>

<li><span>MenuItem33</span></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

<style type="text/css">

.widget

{

width: 600px;

height: 0;

}

</style>

In our example menu item contains a plain text, which when clicked a pop-up message will appear stating which menu is clicked. We can modify this so even menu item doesn’t contain a hyperlink, we can still open a page and make the item with only plain text, still act as a hyperlink.

How to Handle Menu Open/Close Events

Be default, each menu item will open and show its submenus only when it is clicked. If we set the openOnHover property value to true, when mouse cursor is placed over their parent menu, all submenus can now open.

Demo: Menus that Open on Click or on Hover

This process is accompanied with firing of open event. Similarly when menu or submenu is closed, the close event is fired. You can handle these events in your code and add a specific action if required. To simplify our example in both cases, when menus are opened and closed, the console window will display a message stating the menu item for which these events are fired.

$menu

.on({

"close": function(e){

console.log("close event was fired for menu " + e.object.text);

},

"open": function(e){

console.log("open event was fired for menu " + e.object.text);

}

});

Above demonstration shows when and in what order a specific event is fired. Only events related with add/remove operations are excluded.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.