jQuery contextMenu reference

Class: ContextMenuHtml5Builder

ContextMenuHtml5Builder

considering the following HTML $.contextMenu.fromMenu($('#html5menu')) will return a proper items object.

 <menu id="html5menu" type="context" style="display:none">
    <command label="rotate" onclick="alert('rotate')">
    <command label="resize" onclick="alert('resize')">
    <menu label="share">
        <command label="twitter" onclick="alert('twitter')">
        <hr>
        <command label="facebook" onclick="alert('facebook')">
    </menu>
 </menu>

$.contextMenu.fromMenu() will properly import (and thus handle) the following elements. Everything else is imported as {type: "html"}

 <menu>
 <hr>
 <a>
 <command type="command|radio|checkbox"> (W3C Specification)
 <menuitem type="command|radio|checkbox"> (Firefox)
 <input type="text|radio|checkbox">
 <select>
 <textarea>
 <label for="someId">
 <label> the text <input|textarea|select>

The <menu> must be hidden but not removed, as all command events (clicks) are passed-thru to the original command element!

Note: While the specs note <option>s to be renderd as regular commands, $.contextMenu will render an actual <select>.

HTML5 <menu> shiv/polyfill

Engaging the HTML5 polyfill (ignoring $.contextMenu if context menus are available natively):

 $(function(){
    $.contextMenu("html5");
 });

Engaging the HTML5 polyfill (ignoring browser native implementation):

 $(function(){
    $.contextMenu("html5", true);
 });

new ContextMenuHtml5Builder()

Source:

Methods

build(items, $children, counter)

Helper function for building a menu from a HTML menu element.

Parameters:
Name Type Argument Description
items Object.<string, ContextMenuItem>

ContextMenuItem object to build.
$children JQuery

Collection of elements inside the <menu> element
counter number <nullable>

Counter to generate ContextMenuItem key names.
Source:
Returns:
Type
number

fromMenu(element)

Helper function to build ContextMenuItems from an html5 menu element.

Parameters:
Name Type Description
element JQuery | string

Menu element to generate the menu from.
Source:
Returns:
Type
Object.<string, ContextMenuItem>

inputLabel(node)

Get the input label for the given node.

Parameters:
Name Type Description
node HTMLElement

Html element
Source:
Returns:
  • Input label element
Type
string | JQuery | jQuery