Fork on GitHub

HTML5 <menu> shiv/polyfill

• HTML5 <menu> import
• HTML5 <menu> shiv/polyfill

HTML5 <menu> import

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); 
});