JQueryUI - Day 10 (Menu)

In this article, you will learn about Dialog in jQueryUI. This is part 10 of the article series.

Before reading this article, I highly recommend reading the previous parts of the series:

A menu widget provides mouse and keyboard interactions for navigation. A menu widget usually consists of a main menu bar with pop up menus. Each pop menu may have a sub pop menu. A menu may be created by list element (ul or ol) or may be created using other markup elements.

Syntax:

$(selector, context).menu (options)

or

$(selector, context).menu ("action", params)

Example

  1. <!DOCTYPEhtml>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu-1").menu({  
  19.   
  20.                             icons: {  
  21.                                 submenu: "ui-icon-transferthick-e-w"  
  22.                             },  
  23.   
  24.                             "select": function(event, ui) {  
  25.   
  26.                                 alert(ui.item.text());  
  27.   
  28.                             }  
  29.                         });  
  30.   
  31.                     });  
  32.                 </script>  
  33.   
  34.                 <style>  
  35.                     .ui-menu {  
  36.                         width: 180px;  
  37.                         margin-left: 400px;  
  38.                         font-size: 24px;  
  39.                         margin-top: 50px  
  40.                     }  
  41.                      
  42.                     #div1 {  
  43.                         background-color: coral;  
  44.                         color: ButtonHighlight;  
  45.                         font-size: 30px;  
  46.                         height: 450px;  
  47.                         width: 1000px;  
  48.                         text-align: center;  
  49.                         margin-left: 150px  
  50.                     }  
  51.                 </style>  
  52.   
  53.                 </head>  
  54.   
  55.                 <body>  
  56.   
  57.                     <div id="div1">  
  58.   
  59.                         <span>************Menu*************</span>  
  60.   
  61.                         <ul id="menu-1">  
  62.   
  63.                             <li>  
  64.                                 <a href="#">Element1</a>  
  65.                             </li>  
  66.   
  67.                             <li>  
  68.                                 <a href="#">Element2</a>  
  69.                             </li>  
  70.   
  71.                             <li>  
  72.                                 <a href="#">Element3</a>  
  73.   
  74.                                     <ul>  
  75.   
  76.                                         <li>  
  77.                                             <a href="#">Element3-1</a>  
  78.                                         </li>  
  79.   
  80.                                         <li>  
  81.                                             <a href="#">Element3-2</a>  
  82.                                         </li>  
  83.   
  84.                                         <li>  
  85.                                             <a href="#">Element3-3</a>  
  86.                                         </li>  
  87.   
  88.                                     </ul>  
  89.   
  90.                             </li>  
  91.   
  92.                             <li>  
  93.                                 <a href="#">Element4</a>  
  94.                             </li>  
  95.   
  96.                             </ul>  
  97.   
  98.                             </div>  
  99.   
  100.                 </body>  
  101.   
  102.                 </html>  

Output

output

Option

Option

Description

Example

isable

If set to set disables the menu

$("#menu-1").menu({

disabled: true

});

icon

Define icon used for menu

$("#menu-1").menu({

icons: { submenu: "ui-icon-transferthick-e-w" },

});

items

Define selector for the elements that serve as the menu items. Default value is “> *”

$("#menu-1").menu({

items: "*"

});

menus

Define a selector for the elements that serve as the menu container, including sub-menus. By default its value is ul.

$("#menu-1").menu({

menus: "div"

});

position

Define the position of submenus in relation to the associated parent menu item. By default value is { my: "left top", at: "right top" }

$("#menu-1").menu({

position:{ my: "left top", at: "left top" }

});

role

Define ARIA roles used for the menu and menu items. By default its value is menu.

$("#menu-1").menu({

role: null

});

Methods

Method

Description

Example

blur(event)

Removes focus from a menu and resets any active element styles

$("#menu-1").menu("blur");

collapse(event)

Closes the currently active sub-menu.

$("#menu-1").menu("collapse");

expand(event)

Opens the sub-menu below the currently active item, if one exists.

$("#menu-1").menu("expand");

focus(event,item)

This method activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event.

$("#menu-1").menu("focus", null, menu.find(".ui-menu-item:first"));

isFirstItem()

This method returns a boolean value, if the current active menu item is the first menu item.

varobj=$("#menu-1").menu("isFirstItem");

isLastItem()

This method returns a boolean value, if the current active menu item is the last menu item.

varobj=$("#menu-1").menu("isLastItem");

nextPage(event)

This method moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable

$("#menu-1").menu("nextPage");

previos(event)

This method moves active state to previous menu item.

$("#menu-1").menu("previous");

previousPage(event)

This method moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable.

$("#menu-1").menu("previousPage");

referesh()

This method initializes sub-menus and menu items that have not already been initialized.

$("#menu-1").menu("refresh");

select()

This method selects the currently active menu item, collapses all sub-menus and triggers the menu's select event.

$("#menu-1").menu("select");

Events:

Event

Description

Example

blur(event,ui)

Event triggered when the menu loses focus.

$("#menu-1").menu({ blur: function (event, ui) { } });

create(event,ui)

Event triggered when the menu is created.

$("#menu-1").menu({ create: function (event, ui) { } });

focus(event,ui)

Event triggered when a menu gains focus or when any menu item is activated.

$("#menu-1").menu({ focus: function (event, ui) { } });

select(event,ui)

Event triggered when a menu item is selected.

$("#menu-1").menu({ select: function (event, ui) { } });

Let us take some example:

Example 1

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu").menu({  
  19.                             icons: {  
  20.                                 submenu: "ui-icon-transferthick-e-w"  
  21.                             },  
  22.                         });  
  23.   
  24.                     });  
  25.                 </script>  
  26.   
  27.                 <style>  
  28.                     .ui-menu {  
  29.                         width: 180px;  
  30.                         margin-left: 400px;  
  31.                         font-size: 24px;  
  32.                         margin-top: 50px  
  33.                     }  
  34.                      
  35.                     #div1 {  
  36.                         background-color: coral;  
  37.                         color: ButtonHighlight;  
  38.                         font-size: 30px;  
  39.                         height: 450px;  
  40.                         width: 1000px;  
  41.                         text-align: center;  
  42.                         margin-left: 150px  
  43.                     }  
  44.                 </style>  
  45.   
  46.                 </head>  
  47.   
  48.                 <body>  
  49.   
  50.                     <div id="div1">  
  51.   
  52.                         <span>************Menu*************</span>  
  53.   
  54.                         <ul id="menu">  
  55.   
  56.                             <li>  
  57.                                 <a href="#">Bihar</a>  
  58.                             </li>  
  59.   
  60.                             <li>  
  61.                                 <a href="#">Assam</a>  
  62.   
  63.                                     <ul>  
  64.   
  65.                                         <li>  
  66.                                             <a href="#">Dhubri</a>  
  67.                                         </li>  
  68.   
  69.                                         <li>  
  70.                                             <a href="#">Goalpara</a>  
  71.                                         </li>  
  72.   
  73.                                         <li>  
  74.                                             <a href="#">Golaghat</a>  
  75.                                         </li>  
  76.   
  77.                                     </ul>  
  78.   
  79.                             </li>  
  80.   
  81.                             <li>  
  82.                                 <a href="#">Haryana</a>  
  83.   
  84.                                     <ul>  
  85.   
  86.                                         <li>  
  87.                                             <a href="#">Bhiwani</a>  
  88.                                         </li>  
  89.   
  90.                                         <li>  
  91.                                             <a href="#">Gurgaon</a>  
  92.                                         </li>  
  93.   
  94.                                         <li>  
  95.                                             <a href="#">Hisar</a>  
  96.                                         </li>  
  97.   
  98.                                     </ul>  
  99.   
  100.                             </li>  
  101.   
  102.                             <li class='ui-state-disabled'>  
  103.                                 <a href="#">Rajasthan</a>  
  104.                                     </li>  
  105.   
  106.                                     <li>  
  107.                                         <a href="#">Goa</a>  
  108.   
  109.                                             <ul>  
  110.   
  111.                                                 <li>  
  112.                                                     <a href="#">North Goa</a>  
  113.                                                 </li>  
  114.   
  115.                                                 <li>  
  116.                                                     <a href="#">South Goa</a>  
  117.                                                 </li>  
  118.   
  119.                                             </ul>  
  120.   
  121.                                     </li>  
  122.   
  123.                                     </ul>  
  124.   
  125.                                     </div>  
  126.   
  127.                 </body>  
  128.   
  129.                 </html>  

Output

Output

In above example we used the “ui-state-disabled” class for li(rajasthan) item. This class is used to disable any item in the menu.

Example 2

  1. <!DOCTYPE html>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu").menu({  
  19.   
  20.                             icons: {  
  21.                                 submenu: "ui-icon-transferthick-e-w"  
  22.                             },  
  23.   
  24.                             items: "> :not(.ui-widget-header)"  
  25.   
  26.                         });  
  27.   
  28.                     });  
  29.                 </script>  
  30.   
  31.                 <style>  
  32.                     .ui-menu {  
  33.                         width: 180px;  
  34.                         margin-left: 400px;  
  35.                         font-size: 24px;  
  36.                         margin-top: 50px  
  37.                     }  
  38.                      
  39.                     #div1 {  
  40.                         background-color: coral;  
  41.                         color: ButtonHighlight;  
  42.                         font-size: 30px;  
  43.                         height: 450px;  
  44.                         width: 1000px;  
  45.                         text-align: center;  
  46.                         margin-left: 150px  
  47.                     }  
  48.                 </style>  
  49.   
  50.                 </head>  
  51.   
  52.                 <body>  
  53.   
  54.                     <div id="div1">  
  55.   
  56.                         <span>************Menu*************</span>  
  57.   
  58.                         <ul id="menu">  
  59.   
  60.                             <li class="ui-widget-header">East India</li>  
  61.   
  62.                                 <li>  
  63.                                     <a href="#">Bihar</a>  
  64.                                 </li>  
  65.   
  66.                                 <li>  
  67.                                     <a href="#">Assam</a>  
  68.   
  69.                                         <ul>  
  70.   
  71.                                             <li>  
  72.                                                 <a href="#">Dhubri</a>  
  73.                                             </li>  
  74.   
  75.                                             <li>  
  76.                                                 <a href="#">Goalpara</a>  
  77.                                             </li>  
  78.   
  79.                                             <li>  
  80.                                                 <a href="#">Golaghat</a>  
  81.                                             </li>  
  82.   
  83.                                         </ul>  
  84.   
  85.                                 </li>  
  86.   
  87.                                 <li class="ui-widget-header">North India</li>  
  88.   
  89.                                     <li>  
  90.                                         <a href="#">Haryana</a>  
  91.   
  92.                                             <ul>  
  93.   
  94.                                                 <li>  
  95.                                                     <a href="#">Bhiwani</a>  
  96.                                                 </li>  
  97.   
  98.                                                 <li>  
  99.                                                     <a href="#">Gurgaon</a>  
  100.                                                 </li>  
  101.   
  102.                                                 <li>  
  103.                                                     <a href="#">Hisar</a>  
  104.                                                 </li>  
  105.   
  106.                                             </ul>  
  107.   
  108.                                     </li>  
  109.   
  110.                                     <li class='ui-state-disabled'>  
  111.                                         <a href="#">Rajasthan</a>  
  112.                                             </li>  
  113.   
  114.                                             <li class="ui-widget-header">South India</li>  
  115.   
  116.                                                 <li>  
  117.                                                     <a href="#">Goa</a>  
  118.   
  119.                                                         <ul>  
  120.   
  121.                                                             <li>  
  122.                                                                 <a href="#">North Goa</a>  
  123.                                                             </li>  
  124.   
  125.                                                             <li>  
  126.                                                                 <a href="#">South Goa</a>  
  127.                                                             </li>  
  128.   
  129.                                                         </ul>  
  130.   
  131.                                                 </li>  
  132.   
  133.                                                 <li class="ui-widget-header">West Indian</li>  
  134.   
  135.                                                     <li>  
  136.                                                         <a href="#">Gujarat</a>  
  137.                                                     </li>  
  138.   
  139.                                                     </ul>  
  140.   
  141.                                                     </div>  
  142.   
  143.                 </body>   
  144.   
  145.                 </html>  

Output

output

Item option defines selector for the elements that serve as the menu items. In above example we used the item option to create the different category of states.