Interface: ContextMenuOptions

ContextMenuOptions

Register new contextMenu

To register a new contextMenu:

 $.contextMenu( contextMenuOptions );

Update contextMenu state

It is possible to refresh the state of the contextmenu disabled, visibility, icons and input values through the update command. This will reevaluate any custom callbacks.

 $('.context-menu-one').contextMenu('update'); // update single menu
 $.contextMenu('update') // update all open menus
Properties:
Name Type Argument Default Description
selector null | string

Selector on which the contextMenu triggers.

items Object.<string, ContextMenuItem>

Object with items to be listed in contextMenu. See ContextMenuItem for a full documentation on how to build your menu items.

appendTo JQuery.Selector | DOMElement <optional>
document.body

Specifies the selector string or DOMElement the generated menu is to be appended to.

trigger 'right' | 'left' | 'hover' | 'touchstart' | 'none' left

Method to trigger context menu ["right", "left", "hover", "touchstart", "none"].

itemClickEvent string <nullable>

Allows the selection of the click event instead of the mouseup event to handle the user mouse interaction with the contexMenu. The default event is mouseup. Set the option to "click" to change to the click event.

This option is global: the first contexMenu registered sets it. To change it afterwards all the contextMenu have to be unregistered with $.contextMenu( 'destroy' ); before the change has effect again.

hideOnSecondTrigger boolean false

Flag denoting if a second trigger should close the menu, as long as the trigger happened on one of the trigger-element's child nodes. This overrides the reposition option.

selectableSubMenu boolean false

Ability to select ContextMenuItem containing a submenu.

reposition boolean true

flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu as long as the trigger happened on one of the trigger-element's child nodes

delay number 200

ms to wait before showing a hover-triggered context menu.

autoHide boolean true

Hide menu when mouse leaves trigger / menu elements.

zIndex number | function 1

offset to add to zIndex

className string

Class to be appended to the root menu.

classNames Object

Default classname configuration to be able avoid conflicts in frameworks.

Properties
Name Type Default Description
hover string context-menu-hover
disabled string context-menu-disabled
visible string context-menu-visible
notSelectable string context-menu-not-selectable
icon string context-menu-icon
iconEdit string context-menu-icon-edit
iconCut string context-menu-icon-cut
iconCopy string context-menu-icon-copy
iconPaste string context-menu-icon-paste
iconDelete string context-menu-icon-delete
iconAdd string context-menu-icon-add
iconQuit string context-menu-icon-quit
iconLoadingClass string context-menu-icon-loading
animation Object

Animation settings

Properties
Name Type Default Description
duration number 50
show string 'slideDown'
hide string 'slideUp'
events Object

Event callbacks. This is the trigger element, first argument is the event, and the second argumant ContextMenuData.

Properties
Name Type Description
show function

Called when contextmenu is shown.

hide function

Called when contextmenu is hidden.

activated function

Called when contextmenu is activated.

callback ContextMenuItemCallback

Global callback called then a ContextMenuItem is clicked.

build ContextMenuBuildCallback false
position position

Callback to override the position of the context menu. The function is executed in the context of the trigger object.

The first argument is a jQuery.Event. The second argument is the ContextMenuData object, which has a $menu property with the menu that needs to be positioned. The third and fourth arguments are x and y coordinates provided by the show event.

The x and y may either be integers denoting the offset from the top left corner, undefined, or the string "maintain". If the string "maintain" is provided, the current position of the $menu must be used. If the coordinates are undefined, appropriate coordinates must be determined. An example of how this can be achieved is provided with determinePosition.

determinePosition determinePosition
positionSubmenu positionSubmenu

Callback tha positions a submenu

_hasContext boolean

Set to true if the call was done from an element.

Source:

Methods


determinePosition($menu)

Determine the position for a root menu.

Parameters:
Name Type Description
$menu JQuery
Source:

position(e, currentMenuData, x, y)

Position the root menu.

Parameters:
Name Type Description
e JQuery.Event
currentMenuData ContextMenuData
x number | string
y number | string
Source:

positionSubmenu(e, $menu)

Position a submenu.

Parameters:
Name Type Description
e JQuery.Event
$menu JQuery
Source: