jQuery contextMenu reference

Global

Members

<constant> ContextMenuItemTypes

Possible ContextMenuItem types

Properties:
Name Type Default Description
simple

The command is a simple clickable item.
text text

Makes the command an <input> of type text. The name followed by the <input> are encapsulated in a <label>.
textarea textarea

Makes the command a <textarea>. The name followed by the <textarea> are encapsulated in a <label>.
checkbox checkbox

Makes the command an <input> of type checkbox. The name followed by the <input> are encapsulated in a <label>.
radio radio

Makes the command an <input> of type radio. The name followed by the <input> are encapsulated in a <label>.
select select

Makes the command aa <select>. The name followed by the <select> are encapsulated in a <label>.
html html

Makes an non-command element. When you select type: 'html' add the html to the html property. So: { item: { type: 'html', html: '<span>html!</span>' } }. You can also just use the item name with the isHtmlName property.
separator cm_separator

Internal property, used internally when the type is set to a string.
submenu sub

Internal property for a ContextMenuItem that has an items property with other ContextMenuItem items.
Source:

Type Definitions

ContextMenuBuildCallback(e, $currentTrigger)

Parameters:
Name Type Description
e JQuery.Event

Event that trigged the menu.
$currentTrigger JQuery

Element that trigged the menu.
Source:
Returns:
Type
Object.<string, ContextMenuItem>

ContextMenuEvent

Type:
  • jQuery.Event
Properties:
Name Type Description
data ContextMenuData
Source:

ContextMenuIconCallback(e, $t, key, item, currentMenuData, rootMenuData)

Specifies the icon class to set for the item.

When using a string icons must be defined in CSS with selectors like .context-menu-item.context-menu-icon-edit, where edit is the icon class specified.

When using a callback you can return a class string to use that as the class on the item. You can also modify the element by using the $itemElement argument.

Parameters:
Name Type Description
e ContextMenuEvent | JQuery.Event
$t JQuery
key string
item ContextMenuItem
currentMenuData ContextMenuData
rootMenuData ContextMenuData
Source:
Example
var items = {
    firstCommand: {
        name: "Copy",
        icon: function(e, $itemElement, itemKey, item, currentMenuData, rootMenuData){
            // Set the content to the menu trigger selector and add an bootstrap icon to the item.
            $itemElement.html('<span class="glyphicon glyphicon-star" aria-hidden="true"></span> ' + currentMenuData.selector);

            // Add the context-menu-icon-updated class to the item
            return 'context-menu-icon-updated';
        }
    },
    secondCommand: {
        name: "Paste",
        icon: "paste" // Class context-menu-icon-paste is used on the menu item.
    }
}

ContextMenuItemCallback(e, key, currentMenuData, rootMenuData)

The Callback is executed in the context of the triggering object.

Parameters:
Name Type Description
e JQuery.Event

Event that trigged the menu.
key string

Key of the menu item.
currentMenuData ContextMenuData

Data of the (sub)menu in which the item resides.
rootMenuData ContextMenuData

Data of the root menu in which the item resides. Might be the same as currentMenuData if triggered in the menu root.
Source:
Returns:
Type
boolean

ContextMenuItemTypeCallback(e, item, currentMenuData, rootMenuData)

Runs in the scope of the <li> of the contextmenu.

Parameters:
Name Type Description
e JQuery.Event

Event that trigged the menu.
item ContextMenuItem

Menu item
currentMenuData ContextMenuData

Data of the (sub)menu in which the item resides.
rootMenuData ContextMenuData

Data of the root menu in which the item resides. Might be the same as currentMenuData if triggered in the menu root.
Source: