The official home of the Python Programming Language: JqueryUI Menu

JqueryUI Menu

A menu widget usually consists of a main menu bar with pop up menus. Items in pop up menus often have sub pop up menus. A menu can be created using the markup elements as long as the parent-child relation is maintained (using <ul> or <ol>). Each menu item has an anchor element.

The Menu Widget in jQueryUI can be used for inline and popup menus, or as a base for building more complex menu systems. For example, you can create nested menus with custom positioning.

jQueryUI provides menu() methods to create a menu.

Syntax

The menu() method can be used in two forms:

$(selector, context).menu (options)Method

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

$(selector, context).menu (options) Method

The menu (options) method declares that an HTML element and its contents should be treated and managed as menus. The optionsparameter is an object that specifies the appearance and behavior of the menu items involved.

Syntax

$(selector, context).menu (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows:

$(selector, context).menu({option1: value1, option2: value2..... });

Following table lists the different options that can be used with this method:

Option

Description

disabled

This option if set to true disables the menu. By default its value is false.

icons

This option sets the icons for submenus. By default its value is { submenu: "ui-icon-carat-1-e" }.

menus

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

position

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

role

This option is used to customize the ARIA roles used for the menu and menu items. By default its value ismenu.

Default Functionality

The following example demonstrates a simple example of menu widget functionality, passing no parameters to the menu() method .

<!doctype html>

<head>

<title>jQuery UI Menu functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-menu {

width: 200px;

}

</style>

$(function() {

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

});

</script>

</head>

<body>

<li><a href="#">Spring</a></li>

<li><a href="#">Hibernate</a></li>

<ul>

<li><ahref="#">Swing</a></li>

<li><a href="#">JasprReports</a></li>

</ul>

</li>

</ul>

</body>

</html>

Let's save above code in an HTML filemenuexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Spring

Hibernate

Java

JSF

HTML5

In the above example you can see a themeablemenu with mouse and keyboard interactions for navigation.

Use of icons and position

The following example demonstrates the usage of two options icons, and position in the menu function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Menu functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-menu {

width: 200px;

}

</style>

$(function() {

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

icons: { submenu: "ui-icon-circle-triangle-e"},

position: { my: "right top", at: "right-10 top+5" }

});

</script>

</head>

<body>

<li><a href="#">Spring</a></li>

<li><a href="#">Hibernate</a></li>

<ul>

<li><ahref="#">Swing</a></li>

<li><a href="#">JasprReports</a></li>

</ul>

</li>

</ul>

</body>

</html>

Let's save above code in an HTML filemenuexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Spring

Hibernate

Java

JSF

HTML5

In the above example you can see we have applied an icon image for the submenu list and also changed the submenu position.

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

The menu ("action", params) method can perform an action on menu elements, such as enabling/disabling the menu. The action is specified as a string in the first argument (e.g., "disable" disables the menu). Check out the actions that can be passed, in the following table.

Syntax

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

Following table lists the different actions that can be used with this method:

Action

Description

blur( [event ] )

This action removes the focus from a menu. It triggers the menu's blur event by resetting any active element style. Whereevent is of type Event and represents what triggered the menu to blur.

collapse( [event ] )

This action closes the current active sub-menu. Where eventis of type Event and represents what triggered the menu to collapse.

collapseAll( [event ] [, all ] )

This action closes all the open submenus.

destroy()

This action removes menu functionality completely. This will return the element back to its pre-init state. This method does not accept any arguments.

disable()

This action disables the menu. This method does not accept any arguments.

enable()

This action enables the themenu. This method does not accept any arguments.

expand( [event ] )

This action opens the sub-menu below the currently active item, if one exists. Where event is of type Event and represents what triggered the menu to expand.

focus( [event ], item )

This action activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event. Where event is of type Event and represents what triggered the menu to gain focus. and item is a jQuery object representing the menu item to focus/activate.

isFirstItem()

This action returns a booleanvalue, which states if the current active menu item is the first menu item. This method does not accept any arguments.

isLastItem()

This action returns a booleanvalue, which states if the current active menu item is the last menu item. This method does not accept any arguments.

next( [event ] )

This action delegates the active state to the next menu item. Where event is of type Eventand represents what triggered the focus to move.

nextPage( [event ] )

This action moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable. Where event is of type Eventand represents what triggered the focus to move.

option(optionName )

This action gets the value currently associated with the specified optionName. WhereoptionName is of type Stringand represents the name of the option to get.

option()

This action gets an object containing key/value pairs representing the current menu options hash.

option(optionName, value )

This action sets the value of the menu option associated with the specified optionName. Where optionName is of typeString and represents name of option to set and value is of typeObject and represents value to set for the option.

option( options )

This action sets one or more options for the menu. Whereoptions is of type Object and represents a map of option-value pairs to set.

previous( [event ] )

This action moves active state to previous menu item. Whereevent is of type Event and represents what triggered the focus to move.

previousPage( [event ] )

This action moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable. Whereevent is of type Event and represents what triggered the focus to move.

refresh()

This action initializes sub-menus and menu items that have not already been initialized. This method does not accept any arguments.

select( [event ] )

This action selects the currently active menu item, collapses all sub-menus and triggers the menu's select event. Whereevent is of type Event and represents what triggered the selection.

widget()

This action returns a jQuery object containing the menu. This method does not accept any arguments.

Following examples demonstrates using the actions from the above table

Use of disable method

The following example demonstrates the use ofdisable() method.

<!doctype html>

<head>

<title>jQuery UI Menu functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-menu {

width: 200px;

}

</style>

$(function() {

$( "#menu-3" ).menu();

$( "#menu-3" ).menu("disable");

});

</script>

</head>

<body>

<li><a href="#">Spring</a></li>

<li><a href="#">Hibernate</a></li>

<ul>

<li><ahref="#">Swing</a></li>

<li><a href="#">JasprReports</a></li>

</ul>

</li>

</ul>

</body>

</html>

Let's save above code in an HTML filemenuexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Spring

Hibernate

Java

JSF

HTML5

In the above example you can see the menu is disabled.

Use of focus and collapseAll methods

The following example demonstrates the use offocus() and collapseAll methods.

<!doctype html>

<head>

<title>jQuery UI Menu functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-menu {

width: 200px;

}

</style>

$(function() {

var menu = $("#menu-4").menu();

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

$(menu).mouseleave(function () {

menu.menu('collapseAll');

});

</script>

</head>

<body>

<li><a href="#">Spring</a></li>

<li><a href="#">Hibernate</a></li>

<ul>

<li><ahref="#">Swing</a></li>

<li><a href="#">JasprReports</a></li>

</ul>

</li>

</ul>

</body>

</html>

Let's save above code in an HTML filemenuexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Spring

Hibernate

JSF

HTML5

Java

In the above example you can see the focus is on the last menu item. Now expand the submenu and when the mouse leaves the submenu, the submenu is closed.

Event Management on menu elements

In addition to the menu (options) method we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

blur(event,ui)

This event is triggered when a menu loses focus.

create(event,ui)

This event is triggered when a menu is created.

focus(event,ui)

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

select(event,ui)

This event is triggered when a menu item is selected.

Example

The following example demonstrates the event method usage for menu widget functionality. This example demonstrates the use of eventcreate, blur and focus.

<!doctype html>

<head>

<title>jQuery UI Menu functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>

.ui-menu {

width: 200px;

}

</style>

$(function() {

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

create: function( event,ui ) {

var result = $( "#result" );

result.append( "Create event<br>" );

blur: function( event, ui) {

var result = $( "#result" );

result.append( "Blur event<br>" );

focus: function( event, ui) {

var result = $( "#result" );

result.append( "focus event<br>" );

}

});

</script>

</head>

<body>

<li><a href="#">Spring</a></li>

<li><a href="#">Hibernate</a></li>

<ul>

<li><ahref="#">Swing</a></li>

<li><a href="#">JasprReports</a></li>

</ul>

</li>

</ul>

</body>

</html>

Let's save above code in an HTML filemenuexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Spring

Hibernate

JSF

HTML5

Java

Create event

In the above example we printing messages based on the events triggered.

The official home of the Python Programming Language

JqueryUI Menu

ليست هناك تعليقات:

إرسال تعليق