-
@@ -525,6 +525,43 @@ $(document).contextmenu({
```
+### [Howto] Bind different contextmenus to the same DOM element
+
+This is especially useful if we want to bind contextmenus for different selectors
+to the `document` element, in order to make them global:
+
+```js
+$(document).contextmenu({
+ delegate: ".hasmenu",
+ menu: ...,
+ select: function(event, ui) {
+ alert("select contextmenu 1" + ui.cmd + " on " + ui.target.text());
+ }
+});
+```
+
+Another call to `$(document).contextmenu({...})` would destroy the previous
+instance, because the [jQuery Widget Factory](https://learn.jquery.com/jquery-ui/widget-factory/)
+only allows one instance per element.
+
+The soulution is to create new widget with another name but identical functionality:
+
+```js
+// 1. Create and register another widget that inherits directly from
+// jquery-ui-contextmenu:
+$.widget("moogle.contextmenu2", $.moogle.contextmenu, {});
+// 2. Now we can bind this new widget to the same DOM element without
+// destroying a previous widget.
+$(document).contextmenu2({
+ delegate: ".hasmenu2",
+ menu: ...,
+ select: function(event, ui) {
+ alert("select contextmenu2" + ui.cmd + " on " + ui.target.text());
+ }
+});
+```
+
+
# Credits
Thanks to all [contributors](https://github.com/mar10/jquery-ui-contextmenu/contributors).
From 599ea7c3fcb04bbbd76e8661905ab4d108f3c7ef Mon Sep 17 00:00:00 2001
From: "Martin@MBP"
- action -
-
- Type:
Function, default: n.a.
- Optional callback that will be executed when the entry is selected. -
- - addClass -
-
- Type:
String, default:""
- Additional class name(s) to be added to the entries <li> element. - Separate multiple class names with a space.
- Custom CSS may be applied like.ui-menu .my-class { color: red; }. -
- - cmd -
-
- Type:
String, default:""
- Optional identifier associated with the menu entry. - It can later be accessed in the select event asui.cmd. -
- - data -
-
- Type:
Object, default:{}
- Optional hash of additional properties that will be added to the entry's - data attribute.
- It can later be accessed in the select event asui.item.data(). -
- - disabled -
-
- Type:
Boolean, default:false
- Pass true to disable the entry. -
- - title -
-
- Type:
String, default:""
- The displayed name of the menu entry. Use dashes ("---") to - define a separator. -
- - uiIcon -
-
- Type:
String, default: ""
- If defined, an icon is added to the menu entry. For example passing -"ui-icon-copy"will generate this element: -<span class='ui-icon ui-icon-copy' />.
- See also <Icon Overview. -
- - Copy -
- Paste -
- ---- -
- More
-
-
-
- Sub 1 -
- Sub 2 -
- - Copy - ... -
- addClass -
-
- Type:
String, - default:"ui-contextmenu"
- This class is added to the outer ul element. -
- - autoFocus -
-
- Type:
Boolean, - default:false
- Set keyboard focus to first menu entry on open. -
- - autoTrigger -
-
- Type:
Boolean, - default:true
- Set `false` to prevent opening on a browser's `contextmenu` event, which is - normally triggered by a mouse rightclick.
- The menu can still be opened by calling the `open()` method. -
- - delegate -
-
- Type:
String
- A selector to filter the elements that trigger the context menu. -
- - hide -
-
- Type:
Boolean | Number | String | Object, - default:{ effect: "fadeOut", duration: "fast" }
- Effect applied when hiding the popup.
- See sample - for possible option values. -
- - ignoreParentSelect -
-
- Type:
Boolean, default:true
- Iftrue, a click on a menu item that contains a sub-menu, will - not trigger theselectevent. -
- - menu -
-
- Type:
Object[] | String | jQuery
- jQuery object or selector of HTML markup that - defines the context menu structure (see - jQueryUI menu for details). - - If an array of objects is passed, it will be used to generate - such markup on the fly. -
- - position -
-
- Type:
Object | Function,
- default:{my: "left top", at: "center", of: event, collision: "fit"}
- Define position where popup opens. A simple position may be passed.
- Also a function may be specified, to recalculate position every time:
-- $("#container").contextmenu({ - position: function(event, ui){ - return {my: "left top", at: "left bottom", of: ui.target}; - }, ...-
- - preventContextMenuForPopup -
-
- Type:
Boolean, default:false
- Prevent that a right click inside an open popup menu will open the browser's - system context menu. -
- - preventSelect -
-
- Type:
Boolean, default:false
- Prevent accidental text selection of potential menu targets on doubleclick - or drag. -
- - show -
-
- Type:
Boolean | Number | String | Object, - default:{ effect: "slideDown", duration: "fast"}
- Effect applied when showing the popup.
- See sample - for possible option values. -
- - taphold -
-
- Type:
Boolean, default:false
- Open menu on taphold events, - which is especially useful for touch devices (but may require external - plugins to generatetapholdevents). -
- - tooltip -
-
- Type:
String, optional
- Add atitleattribute to the menu markup, which will be displayed - as tooltip by most browser (or external plugins). -
- - uiMenuOptions -
-
- Type:
Object, default:{}
- Custom options passed to UI Menu, when the widget is created.
- Especially useful to tweak the position of submenus. -
- - close() -
-
- Close context menu if open.
- Call like$(...).contextmenu("close");. -
- - enableEntry(cmd, flag) -
-
- Enable or disable the entry. `flag` defaults to `true`
- Call like$(...).contextmenu("enableEntry", "paste", false);. -
- - getMenu() -
-
- Return the jQuery object for the menu's
ULelement. -
- - isOpen() -
- - Return true if popup is visible. - -
- open(target[, extraData]) -
-
- Open context menu on a specific target (target (as a jQuery object) must match the options.delegate filter).
- Call like$(...).contextmenu("open", $(target)[, extraData]);. - Optional `extraData` will be available in event handlers asui.extraData. -
- - replaceMenu(menu) -
-
- Replace the whole menu definition.
- Call like$(...).contextmenu("replaceMenu", "#menu2");. - or$(...).contextmenu("replaceMenu", [{title: "aaa"}, {title: "bbb"}, ...]);. -
- - setEntry(cmd, data) -
-
- Redefine menu entry (title or all of it).
- `data` may be a title string or a menu definition object.
- Call like$(...).contextmenu("setEntry", "paste", "Paste link");. -
- - showEntry(cmd, flag) -
-
- Show or hide the entry. `flag` defaults to `true`
- Call like$(...).contextmenu("showEntry", "paste", false);. -
- - beforeOpen(event, ui) -
-
- Triggered just before the popup menu is opened.
- Returnfalseto prevent opening.
- This is also a good place to modify the menu (i.e. hiding, disabling, or - renaming entries, or replace the menu altogether). -
- - blur(event, ui) -
- - Triggered when the menu loses focus (original jQuery UI Menu event). - -
- close(event) -
- - Triggered when the menu is closed. - -
- create(event, ui) -
- - Triggered when the contextmenu widget is created. - -
- createMenu(event, ui) -
- - Triggered when the popup menu is created (original jQuery UI Menu `create` event). - -
- focus(event, ui) -
- - Triggered when a menu gains focus or when any menu item is activated (original jQuery UI Menu event). - -
- open(event) -
- - Triggered when the menu is opened. - -
- select(event, ui) -
-
- Triggered when a menu item is selected.
-ui.cmdcontains the command id. - Returnfalseto prevent closing the menu. -
- - Initialized using a command-array. +
- Entry 'More - Sub1' uses the callback syntax. +
- The menu is modified in the `beforeOpen` event (disabling an renaming entries). +
- `preventSelect: true` prevents accidential selection of the menu + targets (i.e. 'AAA') when double-clicking or dragging the mouse. +
- `taphold: true` enables long-press to open the menu (useful on + tablet computers). +
- Ctrl+Click or two-finger-click on the touchpad also works (MacBook). +
- Initialized by hidden <ul> element. +
- Use custom show/hide effects. +
- Define custom position for initial popup. +
- Define custom position for submenus. +
- Action 2 +
- Action 3 +
- content. */ createEntryMarkup: function(entry, $parentLi) { - var $a = null; + var $wrapper = null; $parentLi.attr("data-command", entry.cmd); @@ -385,17 +386,17 @@ $.extend($.moogle.contextmenu, { } else { if ( isLTE110 ) { // jQuery UI Menu 1.10 or before required an `` tag - $a = $("", { + $wrapper = $("", { html: "" + entry.title, href: "#" }).appendTo($parentLi); if ( entry.uiIcon ) { - $a.append($("").addClass(entry.uiIcon)); + $wrapper.append($("").addClass(entry.uiIcon)); } - } else { - // jQuery UI Menu 1.11+ preferes to avoid `` tags + } else if ( isLTE111 ) { + // jQuery UI Menu 1.11 preferes to avoid `` tags $parentLi.html("" + entry.title); if ( $.isFunction(entry.action) ) { $parentLi.data("actionHandler", entry.action); @@ -405,6 +406,15 @@ $.extend($.moogle.contextmenu, { .append($("") .addClass(entry.uiIcon)); } + + } else { + // jQuery UI Menu 1.12 introduced `
- ` element or definition list (i.e.
`[{title: "Paste", cmd: "paste"}, ...]`).
@@ -27,7 +27,7 @@ See also the [Change Log](https://github.com/mar10/jquery-ui-contextmenu/blob/ma
[  ](http://wwwendt.de/tech/demo/jquery-contextmenu/demo/ "Live demo")
-## Tutorial
+## Getting Started
First, include dependencies:
@@ -40,10 +40,10 @@ First, include dependencies:
```html
-
-
-
+
+
```
@@ -76,491 +76,13 @@ $("#container").contextmenu({
});
```
-The `delegate` option defines a CSS selector, which is evaluated for all
-elements inside the context element (`#container` in our example).
-In order to attach menus to *all* matching elements on the page that have -`class="hasmenu"`, we may use `document` as context: -```js -$(document).contextmenu({ - delegate: ".hasmenu", - ... -}); -``` -**Note:** only one contextmenu widget instance can be bound to one element. -See the *Howto* below for a solution to this problem. - -The `menu` options may contain a (nested) array of entry defiitions. -Following a list of available properties: -
-
-
- ` element
-
-In this case `menu` must point to the markup:
-
-```js
-$(document).contextmenu({
- delegate: ".hasmenu",
- menu: "#options",
- select: function(event, ui) {
- ...
- }
-});
-```
-We also have to provide some HTML markup that defines the context menu structure,
-see [jQueryUI menu] for details:
-
-```html
-
-
-
-
-
-
-
-
-
-
-
` tags)
+ * Add jQuery Ui 1.12 sample with new 'Base' theme
# 1.11.0 / 2015-09-10
diff --git a/demo/index-1-10.html b/demo/index-1-10.html
index 45ad6b5..368aa49 100644
--- a/demo/index-1-10.html
+++ b/demo/index-1-10.html
@@ -179,6 +179,8 @@ jquery.ui-contextmenu.js - Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
diff --git a/demo/index.html b/demo/index.html
index b5d02aa..a621766 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -187,6 +187,8 @@
jquery.ui-contextmenu.js
Demo with jQuery UI 1.11 — + Demo with jQuery UI 1.12 + — Demo with jQuery UI 1.10
diff --git a/demo/index-1-12.html b/demo/index-1-12.html new file mode 100644 index 0000000..3573868 --- /dev/null +++ b/demo/index-1-12.html @@ -0,0 +1,256 @@ + + + + +jquery.ui-contextmenu.js
+ + ++ Demo with jQuery UI 1.11 + — + Demo with jQuery UI 1.12 + — + Demo with jQuery UI 1.10 +
+ +
+
+
+
+ Sample 1
+-
+
Right-click in an element to open the context menu:
+
+
+
+
+
+
+ Sample 2
+-
+
+
+
+
+
+
+
+
+ -
+
Sample 3
+Open context menu using $("#container").contextmenu("open", $(".hasmenu:first")) and close after 2 sec.:
+
+
diff --git a/demo/index.html b/demo/index.html
index b5d02aa..a621766 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -187,6 +187,8 @@ jquery.ui-contextmenu.js
Demo with jQuery UI 1.11 — + Demo with jQuery UI 1.12 + — Demo with jQuery UI 1.10
diff --git a/jquery.ui-contextmenu.js b/jquery.ui-contextmenu.js index 892c60f..a9ab554 100644 --- a/jquery.ui-contextmenu.js +++ b/jquery.ui-contextmenu.js @@ -27,7 +27,8 @@ var supportSelectstart = "onselectstart" in document.createElement("div"), major: parseInt(match[1], 10), minor: parseInt(match[2], 10) }, - isLTE110 = ( uiVersion.major < 2 && uiVersion.minor < 11 ); + isLTE110 = ( uiVersion.major < 2 && uiVersion.minor <= 10 ), + isLTE111 = ( uiVersion.major < 2 && uiVersion.minor <= 11 ); $.widget("moogle.contextmenu", { version: "@VERSION", @@ -375,7 +376,7 @@ $.widget("moogle.contextmenu", { $.extend($.moogle.contextmenu, { /** Convert a menu description into a into a