Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

fixed html5 import

  • Loading branch information...
commit b716d078dd1271d8363e181e4226be3a355eead7 1 parent a72e81b
@rodneyrehm rodneyrehm authored
View
16 README.md
@@ -11,13 +11,21 @@ $.contextMenu is a management facility for - you guessed it - context menus. It
* jQuery 1.6 (not tested with older versions)
* jQuery UI position (optional but recommended)
-## HTML5 compatibility ##
+## HTML5 Compatibility ##
-The Firefox nightlies implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. Whilst the contextMenu plugin handles correct support for 'command' items, it doesn't for 'menuitem'. My fork handles this.
+The [Firefox nightlies](http://nightly.mozilla.org/) implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. $.contextMenu accepts both.
-[contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
+Firefox 9.0a1 does not yet fully implement the contextmenu specification. The elements
+[a](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command),
+[button](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command),
+[input](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-input-element-to-define-a-command) and
+[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command)
+usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands. See [Screenshot](/screenshots/native.firefox-9.0a1.png).
-## Usage ##
+* [contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
+* [command specs](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html)
+
+Note: While the specs note <option>s to be renderd as regular commands, $.contextMenu will render an actual <select>.
register contextMenu from javascript:
View
4 demo.html
@@ -496,6 +496,10 @@ <h2 id="html5">Demo: HTML5 &lt;menu&gt;</h2>
<hr>
<label>foo bar<input type="text" name="foo"></label>
</menu>
+ <select name="foobar">
+ <option value="one">one</option>
+ <option value="two">two</option>
+ </select>
</menu>
</div>
</div>
View
5 docs.html
@@ -35,7 +35,6 @@
<li><a href="#disable-trigger">Disable a contextMenu trigger</a></li>
<li><a href="#enable-trigger">Enable a contextMenu trigger</a></li>
<li><a href="#show-trigger">Manually show a contextMenu</a></li>
- <li><a href="#html5-polyfill">Register HTML5 context &lt;menu&gt;s</a></li>
<li><a href="#unregister-contextMenu">Unregister contextMenu</a></li>
<li><a href="#unregister-all">Unregister all contextMenus</a></li>
<li><a href="#helper-import-values">Helper: Import values for &lt;input&gt;</a></li>
@@ -342,9 +341,6 @@ <h2 id="show-trigger">Manually show a contextMenu</h2>
<p>show the contextMenu of the first element of the selector (position determined by <a href="#options-determinePosition">determinePosition</a>):</p>
<pre>$(".some-selector").contextMenu();</pre>
- <h2 id="html5-polyfill">Register HTML5 context &lt;menu&gt;s</h2>
- <pre>$.contextMenu("html5");</pre>
-
<h2 id="unregister-contextMenu">Unregister contextMenu</h2>
<p>To unregister / destroy a specific contextMenu:</p>
<pre>$.contextMenu( 'destroy', <em>selector</em> );</pre>
@@ -436,6 +432,7 @@ <h2 id="html5-import">HTML5 &lt;menu&gt; import</h2>
<li>&lt;label&gt; the text &lt;input|textarea|select&gt;</li>
</ul>
<p>The &lt;menu&gt; must be hidden but not removed, as all command events (clicks) are passed-thru to the original command element!</p>
+ <p>Note: While the specs note &lt;option&gt;s to be renderd as regular commands, $.contextMenu will render an actual &lt;select&gt;.</p>
<h2 id="html5-shiv">HTML5 &lt;menu&gt; shiv/polyfill</h2>
<p>Engaging the HTML5 polyfill (ignoring $.contextMenu if context menus are available natively):</p>
View
6 index.html
@@ -24,6 +24,12 @@
</ul>
<p>
+ <img src="screenshots/jquery-contextMenu.subs.png" alt="context menu rendered by $.contextMenu">
+ <img src="screenshots/native.firefox-9.0a1.png" alt="Native context menu in Firefox 9.0 Alpha 1">
+ <!-- img src="screenshots/jquery-contextMenu.png" alt="context menu rendered by $.contextMenu" -->
+ </p>
+
+ <p>
The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects.
Unlike implementations as <a href="http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/" target="_blank">a beautiful site's</a> or <a href="http://www.trendskitchens.co.nz/jquery/contextmenu/" target="_blank">trendskitchens'</a> this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn't need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.
</p>
View
38 jquery.contextMenu.js
@@ -1124,8 +1124,11 @@ function menuChildren(items, $children, counter) {
// http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command
case 'a':
+ // http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command
+ case 'button':
item = {
name: $node.text(),
+ disabled: !!$node.attr('disabled'),
callback: (function(){ return function(){ $node.click(); }; })()
};
break;
@@ -1134,34 +1137,34 @@ function menuChildren(items, $children, counter) {
case 'menuitem':
case 'command':
- switch (node.type) {
+ switch ($node.attr('type')) {
case undefined:
case 'command':
case 'menuitem':
item = {
name: $node.attr('label'),
- disabled: node.disabled,
+ disabled: !!$node.attr('disabled'),
callback: (function(){ return function(){ node.click(); }; })()
};
break;
case 'checkbox':
item = {
- type: 'text',
- disabled: node.disabled,
+ type: 'checkbox',
+ disabled: !!$node.attr('disabled'),
name: $node.attr('label'),
- selected: node.checked
+ selected: !!$node.attr('checked')
};
break;
case 'radio':
item = {
- type: 'text',
- disabled: node.disabled,
+ type: 'radio',
+ disabled: !!$node.attr('disabled'),
name: $node.attr('label'),
- radio: node.radiogroup ,
- value: node.id,
- selected: node.checked
+ radio: $node.attr('radiogroup'),
+ value: $node.attr('id'),
+ selected: !!$node.attr('checked')
};
break;
@@ -1180,25 +1183,28 @@ function menuChildren(items, $children, counter) {
item = {
type: 'text',
name: label || inputLabel(node),
+ disabled: !!$node.attr('disabled'),
value: $node.val()
};
break;
case 'checkbox':
item = {
- type: 'text',
+ type: 'checkbox',
name: label || inputLabel(node),
- selected: node.checked
+ disabled: !!$node.attr('disabled'),
+ selected: !!$node.attr('checked')
};
break;
case 'radio':
item = {
- type: 'text',
+ type: 'radio',
name: label || inputLabel(node),
- radio: node.name,
+ disabled: !!$node.attr('disabled'),
+ radio: !!$node.attr('name'),
value: $node.val(),
- selected: node.checked
+ selected: !!$node.attr('checked')
};
break;
@@ -1212,6 +1218,7 @@ function menuChildren(items, $children, counter) {
item = {
type: 'select',
name: label || inputLabel(node),
+ disabled: !!$node.attr('disabled'),
selected: $node.val(),
options: {}
};
@@ -1224,6 +1231,7 @@ function menuChildren(items, $children, counter) {
item = {
type: 'textarea',
name: label || inputLabel(node),
+ disabled: !!$node.attr('disabled'),
value: $node.val()
};
break;
View
BIN  screenshots/jquery-contextMenu.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  screenshots/jquery-contextMenu.subs.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  screenshots/native.firefox-9.0a1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.