Menu JQuery UI

  • Education
  • Job
  • Fruits
    • Mango
    • Banana
    • Orange
    • Apple
  • Vehicle
  • Games
    • Football
    • Tennis
      • Lawn Tennis
      • Table Tennis
    • Golf
    • Badminton
  • Dresses
OptionsDetails
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 ) {})

Changing size ( width ) of the menu

<style>
.ui-menu {
width: 10em; // Change this value
}
</style>

Adding Style

overflow-y: scroll;
//    z-index: 100 !important; 
//    position: fixed !important; // Fixed menu whil scrolling 

Menu with different themes

Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer