| Options | Details |
|---|
| classes |
Type : Object
Default value {}
Classes can be added to the element
$( "#my_menu" ).menu({
classes: {
"ui-menu": "ui-state-highlight"
}
});
To read classes
var status_used = $( "#my_menu" ).menu( "option", "classes.ui-menu" );
To set the classes option
$( "#my_menu" ).menu( "option", "classes.ui-menu", sel );// sel is the variable
|
| disabled |
Type : Boolean
Default value false
We can enable or disable menu.
$( '#my_menu' ).menu({
disabled: true
});
To read disabled option
var status_used = $( "#my_menu" ).menu( "option", "disabled" );
To set the disabled option
$( "#my_menu" ).menu( "option", "disabled", sel );// sel is the boolean variable
|
| icons |
Type : Object
Default value "ui-icon-carat-1-e"
Icons used to show submenu.
$( '#my_menu' ).menu({
icons: { submenu: "ui-icon-circle-triangle-e" }
});
To read icons
var icons_used = $( "#my_menu" ).menu( "option", "icons" );
To set the icon option
$( "#my_menu" ).menu( "option", "icons", { submenu: sel } );// sel is the variable
|
| items |
Type : string
Default value > *
menu items selector
$( '#my_menu' ).menu({
items: "#my_item"
});
To read items
var icons_used = $( "#my_menu" ).menu( "option", "items" );
|
Type : string
Default value ul
menu container, selector for elements
$( '#my_menu' ).menu({
menus: "div"
});
To read items
var icons_used = $( "#my_menu" ).menu( "option", "menus" );
|
| position |
Type : Object
Default value { my: "left top", at: "right top" }
Position of the submenu with respoct to parent menu.
$( '#my_menu' ).menu({
position: { my: "left top", at: "right top" }
});
To read postion option
var option_obj = $( "#my_menu" ).menu( "option" );
$('#d2').html( "position my : " + option_obj.position.my + " , position at : " + option_obj.position.at);
To set positon option
$( "#my_menu" ).menu( "option", "position", { my : "" + my_h + " " + my_v +"", at: "" + at_h + " " + at_v + ""} );
// Here my_h,my_v,at_h,at_v are variables storing respecting postions, check the position demo to know more
|
| role |
Type : string
Default value menu
Set to control menu items.
$( '#my_menu' ).menu({
role: null
});
To get the role option set before
var role_used = $( "#my_menu" ).menu( "option", "role" );
|
Methods |
| blur |
This event is triggered when focus moves out of the Menu. Resets all active menus.
$( "#my_menu" ).menu({
blur :function(event, ui) {
}
});
|
| collapse |
This event coloses the active sub-menu.
$( "#my_menu" ).menu('collapse');
|
| collapseAll |
Closes all open sub-menus.
$( "#my_menu" ).menu('collapseAll',null,true);
|
| destroy |
Removes the functionality of the menu.
$( "#my_menu" ).menu( 'destroy' );
|
| disable |
Disable the menu.
$( "#my_menu" ).menu( 'disable' );
|
| enable |
Enable the menu.
$( "#my_menu" ).menu( 'enable' );
|
| expand |
Opens the submenu .
$( "#my_menu" ).menu( 'expand' );
|
| focus |
Triggers focus event and activate the menu element.
$( "#my_menu" ).menu( "focus", null, $("#my_menu").find( sel ) );
In above code sel is the variable having ID Of the menu element.
|
| instance |
instance object
$( "#my_menu" ).menu( 'instance' );
|
| isFirstItem |
Returns True or False ( boolean ) based on the current active item is first item or not.
var isfirstItem = $( "#my_menu" ).menu( "isFirstItem" );
|
| isLastItem |
Returns True or False ( boolean ) based on the current active item is last item or not.
var isfirstItem = $( "#my_menu" ).menu( "isLastItem" );
|
| next |
Active state is moved to next item.
$( "#my_menu" ).menu( "next" );
|
| nextPage |
Active state is moved to last item ( if not scrollable ) or first item of below the bottom ( if scrollable ) item.
$( "#my_menu" ).menu( "nextPage" );
|
| option |
By giving option name we can get the value as key value pair.
var option_val=$("#my_menu").menu("option","menus")
We can get the value of specified option name by using object.
|
| previous |
Shift active state to previous item.
$( "#my_menu" ).menu( "previous" );
|
| previousPage |
Shifting of active state to fist item above the top ( if scrollable ) or first item ( if not scrollable ) item
$( "#my_menu" ).menu( "previousPage" );
|
| refresh |
Initialize all items including submenu can be added by refreshing
$( "#my_menu" ).menu( "refresh" );
|
| select |
Current active item is selected.
$( "#my_menu" ).menu( "select" );
|
| widget |
Returns a jquery menu object
var menu_object=$("#my_menu").menu("widget");
|
EVENTS |
| blur |
An event listener to the menublur event:
$( "#my_menu" ).on( "menublur", function( event, ui ) {})
|
| create |
An event listener to the menucreate event:
$( "#my_menu" ).on( "menucreate", function( event, ui ) {})
|
| focus |
An event listener to the menufocus event:
$( "#my_menu" ).on( "menufocus", function( event, ui ) {})
|
| select |
An event listener to the menuselect event:
$( "#my_menu" ).on( "menuselect", function( event, ui ) {})
|
JQuery Video Tutorials