jQuery Menu API

Name Type Default

animationShowDuration Number 350

Sets or gets the duration of the show animation.

Code example

Set the animationShowDuration property.

$('#jqxMenu').jqxMenu({ animationShowDuration: 200 });

Get the animationShowDuration property.

var animationShowDuration = $('#jqxMenu').jqxMenu('animationShowDuration');

Try it: animationShowDuration is set to 3000

animationHideDuration Number 250

Sets or gets the duration of the hide animation.

Code example

Set the animationHideDuration property.

$('#jqxMenu').jqxMenu({ animationHideDuration: "fast" });

Get the animationHideDuration property.

var animationHideDuration = $('#jqxMenu').jqxMenu('animationHideDuration');

Try it: animationHideDuration is set to 3000

animationHideDelay Number 500

Sets or gets the delay before the start of the hide animation.

Code example

Set the animationHideDelay property.

$('#jqxMenu').jqxMenu({ animationHideDelay: 500 });

Get the animationHideDelay property.

var animationHideDelay = $('#jqxMenu').jqxMenu('animationHideDelay');

Try it: animationHideDelay is set to 3000

animationShowDelay Number 200

Sets or gets the delay before the start of the show animation.

Code example

Set the animationShowDelay property.

$('#jqxMenu').jqxMenu({ animationShowDelay: 500 });

Get the animationShowDelay property.

var animationShowDelay = $('#jqxMenu').jqxMenu('animationShowDelay');

Try it: animationShowDelay is set to 300

autoCloseInterval Number 10000

Sets or gets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0.

Code example

Set the autoCloseInterval property.

$('#jqxMenu').jqxMenu({ autoCloseInterval: 0 });

Get the autoCloseInterval property.

var autoCloseInterval = $('#jqxMenu').jqxMenu('autoCloseInterval');

Try it: autoCloseInterval is set to 300

autoSizeMainItems Boolean true

Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'.

Code example

Set the autoSizeMainItems property.

$('#jqxMenu').jqxMenu({autoSizeMainItems: false});

Get the autoSizeMainItems property.

var autoSizeMainItems = $('#jqxMenu').jqxMenu('autoSizeMainItems');

Try it: autoSizeMainItems is set to false

autoCloseOnClick Boolean true

Automatically closes the opened popups after a click.

Code example

Set the autoCloseOnClick property.

$('#jqxMenu').jqxMenu({autoCloseOnClick: false});

Get the autoCloseOnClick property.

var autoCloseOnClick = $('#jqxMenu').jqxMenu('autoCloseOnClick');

Try it: autoCloseOnClick is set to false

autoOpenPopup Boolean true

Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the Open and Close functions can be used to open and close the Context Menu.

Code example

Set the autoOpenPopup property.

$('#jqxMenu').jqxMenu({autoOpenPopup: false});

Get the autoOpenPopup property.

var autoOpenPopup = $('#jqxMenu').jqxMenu('autoOpenPopup');

Try it: autoOpenPopup is set to false

autoOpen Boolean true

Opens the top level menu items when the user hovers them.

Code example

Set the autoOpen property.

$('#jqxMenu').jqxMenu({autoOpen: false});

Get the autoOpen property.

var autoOpen = $('#jqxMenu').jqxMenu('autoOpen');

Try it: autoOpen is set to false

clickToOpen Boolean false

Opens an item after a click by the user.

Code example

Set the clickToOpen property.

$('#jqxMenu').jqxMenu({clickToOpen: true});

Get the clickToOpen property.

var clickToOpen = $('#jqxMenu').jqxMenu('clickToOpen');

Try it: clickToOpen is set to true

disabled Boolean false

Enables or disables the jqxMenu.

Code example

Set the disabled property.

$('#jqxMenu').jqxMenu({disabled: false});

Get the disabled property.

var disabled = $('#jqxMenu').jqxMenu('disabled');

Try it: disabled is set to true

enableHover Boolean true

Enables or disables the hover state.

Code example

Set the enableHover property.

$('#jqxMenu').jqxMenu({enableHover:false});

Get the enableHover property.

var enableHover = $('#jqxMenu').jqxMenu('enableHover');

Try it: enableHover is set to false

easing String easeInOutSine

Sets or gets the animation's easing to one of the JQuery's supported easings.

Code example

Set the easing property.

$('#jqxMenu').jqxMenu({ easing: 'easeInOutSine' });

Get the easing property.

var easing = $('#jqxMenu').jqxMenu('easing');

Try it: easing is set to 'linear'

height Number/String null

Sets or gets the jqxMenu's height.

Code example

Set the height property.

$('#jqxMenu').jqxMenu({ height: '100px' });

Get the height property.

var height = $('#jqxMenu').jqxMenu('height');

Try it: height is set to 30

keyboardNavigation Boolean false

Enables or disables the jqxMenu's keyboard navigation.

Code example

Set the keyboardNavigation property.

$('#jqxMenu').jqxMenu({keyboardNavigation: true});

Get the disabled property.

var keyboardNavigation = $('#jqxMenu').jqxMenu('keyboardNavigation');

Try it: keyboardNavigation is set to true

minimizeWidth String 'auto'

Sets or gets the jqxMenu's minimizeWidth. That width determines the minimum browser window's width when the Menu will switch from normal to minimized mode and the Menu's width is in percentages. Set it to null, if you want to disable that behavior. Note: jqxMenu automatically switches to minimized mode, when it is displayed on a touch device. By setting the property to null, you will disable that behavior, too.

Code example

Set the minimizeWidth property.

$('#jqxMenu').jqxMenu({ minimizeWidth: 250 });

Get the minimizeWidth property.

var minimizeWidth = $('#jqxMenu').jqxMenu('minimizeWidth');

Try it: minimizeWidth is set to 450

mode String horizontal

Sets or gets the menu's display mode.

Possible Values:

'horizontal'

'vertical'

'popup'

Code example

Set the mode property.

$('#jqxMenu').jqxMenu({  mode: "vertical" });

Get the mode property.

var mode = $('#jqxMenu').jqxMenu('mode');

Try it: mode is set to 'vertical'

popupZIndex Number 20000

Sets or gets the popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxMenu").jqxMenu({popupZIndex: 999999});

Get the popupZIndex property.

var zIndex = $('#jqxMenu').jqxMenu('popupZIndex');

Try it: popupZIndex is set to 99999

rtl Boolean false

Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxMenu').jqxMenu({rtl : true});

Get the rtl property.

var rtl = $('#jqxMenu').jqxMenu('rtl');

Try it: rtl is set to true

source Object null

Specifies the jqxMenu's data source. Use this property to populate the jqxMenu.

Each menu item may have following fields:
Item Fields

label - item's label.
value - item's value.
html - item's html. The html to be displayed in the item.
id - item's id.
items - array of sub items.
subMenuWidth - sets the sub menu's width.
disabled - determines whether the item is enabled/disabled.

Code examples

Initialize a jqxMenu with the source property specified.


var source = [
    { label: "Item 1", expanded: true, items: [
        { label: "Item 1.1" },
        { label: "Item 1.2", selected: true }
    ]
    },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4", items: [
        { label: "Item 4.1" },
        { label: "Item 4.2" }
    ]
    },
    { label: "Item 5" },
    { label: "Item 6" },
    { label: "Item 7" }
];
    // create jqxMenu
$('#jqxMenu').jqxMenu({ source: source, height: '30px', width: '330px'});

Try it: source is set to source

theme String ''

width Number/String null

Sets or gets the jqxMenu's width.

Code example

Set the width property.

$('#jqxMenu').jqxMenu({ width: '250px' });

Get the width property.

var width = $('#jqxMenu').jqxMenu('width');

Try it: width is set to 450

closed Event

This event is triggered when any of the jqxMenu Sub Menus is closed.

Code example

Bind to the closed event by type: jqxMenu.

$('#jqxMenu').on('closed', function () { // Some code here. });

Try it: Bind to the closed event by type:jqxMenu

itemclick Event

This event is triggered when a menu item is clicked.

Code example

Bind to the itemclick event by type: jqxMenu.

$('#jqxMenu').on('itemclick', function (event)
{
    // get the clicked LI element.
    var element = event.args;
});

Try it: Bind to the itemclick event by type:jqxMenu

initialized Event

This event is triggered after the menu is initialized.

Code example

Bind to the initialized event by type: jqxMenu.

$('#jqxMenu').on('initialized', function () { // Some code here. });

Try it: Bind to the initialized event by type:jqxMenu

shown Event

This event is triggered when any of the jqxMenu Sub Menus is displayed.

Code example

Bind to the shown event by type: jqxMenu.

$('#jqxMenu').on('shown', function () { // Some code here. });

Try it: Bind to the shown event by type:jqxMenu

closeItem Method

Closes a menu item.

Parameter	Type	Description
itemID	String

Return Value
None

Code example

Invoke the closeItem method.

$('#jqxMenu').jqxMenu('closeItem', menuItemId);

Try it: closes an item in the jqxMenu

close Method

Closes the menu (only in context menu mode).

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the close method.

$("#jqxMenu").jqxMenu('close')

Try it: closes a sub menu in the jqxMenu

disable Method

Disables or enables a menu item. The method has two parameters - HTML Element ID and a boolean value which determines whether to disable or enable the element.

Parameter	Type	Description
itemID	String
value	Boolean

Return Value
None

Code examples

Invoke the disable method.

$('#jqxMenu').jqxMenu('disable', 'productLITagID', true);

Try it: disables a jqxMenu item.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxMenu').jqxMenu('destroy');

Try it: destroys the jqxMenu

focus Method

Focuses the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

$('#jqxMenu').jqxMenu('focus');

Try it: focuses the jqxMenu

minimize Method

Minimizes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the minimize method.

$('#jqxMenu').jqxMenu('minimize');

Try it: minimizes the jqxMenu

open Method

Opens the menu(only in context menu mode).

Parameter	Type	Description
left	Number
top	Number

Return Value
None

Code example

Invoke the open method.

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);

Try it: opens a sub menu in the jqxMenu

openItem Method

Opens a menu item

Parameter	Type	Description
itemID	String

Return Value
None

Code example

Invoke the openItem method.

$('#jqxMenu').jqxMenu('openItem', menuItemId);

Try it: opens an item in the jqxMenu

restore Method

Restores the widget from the "minimized" state.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the restore method.

$('#jqxMenu').jqxMenu('restore');

Try it: restores the jqxMenu

setItemOpenDirection Method

Sets the item's popup open direction

Parameter	Type	Description
item	String
horizontaldirection	String
verticaldirection	String

Return Value
None

Code example

Invoke the setItemOpenDirection method.

// @param id

// @param String - horizontal direction

// @param String - vertical direction

$("#jqxMenu").jqxMenu('setItemOpenDirection', 'Services', 'right', 'up');

Try it: sets the direction of opening of the item in the jqxMenu

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code examples

Code example

Events

Code example

Code example

Code example

Code example

Methods

Code example

Code example

Code examples

Code examples

Code examples

Code examples

Code example

Code example

Code examples

Code example