IMPORTANT: 2.0.0 is release and has change the default names of the icon classes in order to stop CSS conflicts with frameworks which define the class 'icon'.
features - demo - documentation
- jQuery >=1.8.2
- jQuery UI position (optional but recommended)
register contextMenu from javascript:
$.contextMenu({
// define which elements trigger this menu
selector: ".with-cool-menu",
// define the elements of the menu
items: {
foo: {name: "Foo", callback: function(key, opt){ alert("Foo!"); }},
bar: {name: "Bar", callback: function(key, opt){ alert("Bar!") }}
}
// there's more, have a look at the demos and docs...
});have a look at the demos.
Firefox 8 implemented contextmenu using the <menuitem> tags for menu-structure. The specs however state that <command> tags should be used for this purpose. $.contextMenu accepts both.
Firefox 8 does not yet fully implement the contextmenu specification (Ticket #617528). The elements a, button, input and option usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands (Bug #705292).
Note: While the specs note <option>s to be renderd as regular commands, $.contextMenu will render an actual <select>. import contextMenu from HTML5 <menu>:
$.contextMenu("html5");You're (obviously) able to use the context menu with your mouse. Once it is opened, you can also use the keyboard to (fully) navigate it.
- ↑ (up) previous item in list, will skip disabled elements and wrap around
- ↓ (down) next item in, will skip disabled elements and wrap around
- → (right) dive into sub-menu
- ← (left) rise from sub-menu
- ↵ (return) invoke command
- ⇥ (tab) next item or input element, will skip disabled elements and wrap around
- ⇪ ⇥ (shift tab) previous item or input element, will skip disabled elements and wrap around
- ⎋ (escape) close menu
- ⌴ (space) captured and ignore to avoid page scrolling (for consistency with native menus)
- ⇞ (page up) captured and ignore to avoid page scrolling (for consistency with native menus)
- ⇟ (page down) captured and ignore to avoid page scrolling (for consistency with native menus)
- ↖ (home) first item in list, will skip disabled elements
- ↘ (end) last item in list, will skip disabled elements
Besides the obvious, browser also react to alphanumeric key strokes. Hitting r in a context menu will make Firefox (8) reload the page immediately. Chrome selects the option to see infos on the page, Safari selects the option to print the document. Awesome, right? Until trying the same on Windows I did not realize that the browsers were using the access-key for this. I would've preferred typing the first character of something, say "s" for "save" and then iterate through all the commands beginning with s. But that's me - what do I know about UX? Anyways, $.contextMenu now also supports accesskey handling.
- Björn Brala
- Rodney Rehm (original creator)
- Christiaan Baartse (single callback per menu)
- Addy Osmani (compatibility with native context menu in Firefox 8)
$.contextMenu is published under the MIT license
Font-Awesome icons used from encharm/Font-Awesome-SVG-PNG.
- Callbacks are now called from the scope of the menu the item is in (like a submenu). For now they overwrite root callbacks only if the item is not in a submenu, this so the callbacks are always correct. Unfortunately this will also mean the callbacks option is still not complete if you use the same key for an item in any place. Cant fix that easily. Issue #413.
- Alias for 'cm_seperator' type: 'cm_separator' (thanks @nelson6e65)
- Removed old integration tests, framework on which they were built is abandoned.
- Enable jQuery 3 tests in TravisCI
- jQuery 3 support was fixed again, was a result of jQuery UI (Fixes #407)
- Add checks for null before using opt.$menu and root.$menu. Fixes #352 (thanks @andreasrosdal)
- Small fix for color or
inputoption on hover
- Documentation added for cm_seperator (thanks @nelson6e65)
- Fix typo in items options documentation (thanks @nelson6e65)
- Fix typo in animation: fadeOut (thanks @avi-meslati-sp)
- Fix typo in docs code:
showis used twice (thanks @kgeorgiou) - Fix in async documentation.
- Add option to show item title as HTML (thanks @brassard)
- Full Font Awesome support
- Use relative units for css fixes (Issue #386) (thanks @RoachMech)
- Change unicode characters in CSS to readable strings.
- Improved item styles (thanks @anseki)
- Force woff2 font creation for Windows some machines.
- Fix so that disabled items can't get focus anymore (thanks @anseki)
- Fix so menu size is calculated better no items will take up 2 lines again (thanks @anseki)
- Fix bower.json (thanks @nelson6e65)
- Fix typo in documentation for "position" and "build" callback (thanks @mmcev106)
- Fixed a problem when using the open function with custom arguments (thanks @RareDevil)
widthis increased when repoening menu. Fixed by using outerwidth to calculate width. Fixes #360 (thanks @anseki)- Submenus are not collapsed when the menu is closed fixes #358 (thanks @anseki)
- Small delay in checking for autohide to fix missing the menu by a pixel or two. Fixes #347 (thanks @Risord)
- Check if an item is not hidden in any way when scrolling through items with the keyboard. Fixes #348
- Change links and base url of documentation to https as mentioned by @OmgImAlexis in PR#345
- Added support for providing a function as zIndex value in options object (thanks @eivindga)
- Fixed a switch to use the correct type for separators (thanks @RareDevil)
- Fixed the problem with submenus size wrongly (Issue #308) (thanks @RareDevil)
- Incorrect entry on package.json (Issue #336) (thanks @Dijir)
- Gray out disabled icons as well as text (Issue #337) (thanks @r02b)
- Optimized generated CSS so that
context-menu-iconclass can be used to overwrite icon CSS. - Positioning of contextmenu when using appendTo (thanks @mrMarco)
- Check to see if target have a higher zIndex than the contextmenu in the key event handler (thanks @RareDevil)
- Remove executable bit from jquery.contextMenu.js (thanks @jacknagel)
- Fixed a problem there was when using a function for icons (thanks @RareDevil)
- Fixed a problem where submenus resized wrong (thanks @RareDevil)
- Fixed a problem where the contextmenu would open another menu (thanks @RareDevil) - (Issue #252 and Issue #293)
- Fixed regression of node name's not being appended to the label of input elements. (thanks @RareDevil)
- Add check that root.$layer exists, to prevent calling hide() on an defined object. (thanks @andreasrosdal)
- This version changes the default names of the icon classes in order to stop CSS conflicts with frameworks which define the class 'icon'. In order to keep the icon names the same as before this change you can change the defaults on the classnames for the icons (docs on classNames option). The classnames will probably be "context-menu-icon-*" as proposed earlier by @rodneyrehm.
- You can not use SASS to customize your contextmenu. The gulp command build-icons takes all the SVG icons from src/icons and builds them into a font. In order to this we needed to break backwards compatibility. This does mean the new CSS does not have the old .icon class defined which makes it a lot more stable within CSS frameworks. The first revision of the documentation is found here.
- The 1.x branch will be maintained for a while with bugfixes. But support for 1.x will be dropped in the coming months.
- Reverted the change from 1.7.0: .html() changed back to .text() since it is an security issue (thanks @arai-a)
- Added gulp command (integration-test-paths) to change the paths in the integration tests to the correct path after they are overwritten by the documentation generator.
- Make sure the contextmenu is not outside the client area by (thanks to @arai-a)
- Update jQuery dependecy so that it will not result in double installation of jQuery when using npm (thanks to @fredericlb)
- Fixed a bug where the classNames options would fail on a submenu.
- New documentation site and generation using couscous
- Make classes configurable for those that can easily conflict. See the docs on classNames option. This also prepares to change classnames to non conflicting defaults so the hassle with frameworks as bootstrap will stop.
- Fix for handling of seperator string. It threw an error on the protected property of String.$node
- Fix for opening the contextmenu at coordinate 0,0 (by Andreme)
- Fixed check for jQuery UI (Issue #182)
- Updated doc for function argument for icon
- Updated readme.
- Updated dist files
- Added dist folder with compiled JS and CSS, added these files to package and bower configuration.
- Fixed doc link for jQuery UI position (Issue #274)
- Item icon can now be a callback to dynamically decide on icon class. - (Issue #158, Issue #129, Issue #151, Issue #249)
- Small fix to calculating width and height on screen edges when padding is present.
- Touch support optimisations (by kccarter76)
- changed .text to .html so there are no extra span's fixed - (Issue #252)
- added visibility callback to item definition
- copy the HTML5 icon attribute when creating from HTML5 elements
- growing menu when opening multiple times fixed - (Issue #197)
- fixed failure to run tests
- changes for new maintainer
- looking for maintainer note
- publish to npm
- fixing bower manifest
- fixing "opening a second menu can break the layer" - (Issue #105)
- fixing jQuery plugin manifest, again. yep. I'm that kind of a guy. :(
- fixing jQuery plugin manifest
- fixing "menu won't close" regression introduced by 1.6.1
- fixing potential html parsing problem
- upgrading to jQuery UI position v1.10.0
- replaced
CRLFbyLF(no idea how this happened in the first place...) - adding
options.repositionto dis/allow simply relocating a menu instead of rebuilding it (Issue #104)
- adding DOM Element bound context menus - (Issue 88)
- adding class
context-menu-activeto define state on active trigger element - (Issue 92) - adding demo for TouchSwipe activation
- adding export of internal functions and event handlers - (Issue 101)
- fixing key "watch" might translate to Object.prototype.watch in callbacks map - (Issue 93)
- fixing menu and submenu width calculation - (Issue 18)
- fixing unused variables - (Issue 100)
- fixing iOS "click" compatibility problem - (Issue 83)
- fixing separators to not be clickable - (Issue 85)
- fixing issues with fixed positioned triggers (Issue 95)
- fixing word break problem - (Issue 80)
- adding context menu options to input command events (Issue 72, dtex)
- code cosmetics for JSLint
- fixing issue with animation and remove on hide (Issue #64)
- fixing backdrop would not remove on destroy (Issue #63)
Note: git tag of version is v1.6.20?!
- fixing backdrop would not position properly in IE6 (Issue #59)
- fixing nested input elements not accessible in Chrome / Safari (Issue #58)
Note: git tag of version is missing...?!
- fixing sub-menu positioning when
$.ui.positionis not available (Issue #56)
Note: git tag of version is missing...?!
- fixing html5
<menu>import (Issue #53)
- fixing
optionsto default tooptions.trigger = "right" - fixing variable name typo (Within Issue #51)
- fixing menu not closing while opening other menu (Within Issue #51)
- adding workaround for
contextmenu-bug in Firefox 12 (Within Issue #51)
- added vendor-prefixed user-select to CSS
- fixed issue with z-indexing when
<body>is used as a trigger (Issue #49)
- allowing to directly open another element's menu while a menu is shown (Issue #48)
- fixing autohide option that would not properly hide the menu
- options.build() would break default options (Issue #47)
- $.contextMenu('destroy') would not remove backdrop
- exposing $trigger to dynamically built custom menu-item types (Issue #42)
- fixing repositioning of open menu (formerly accidental re-open)
- adding asynchronous example
- dropping ignoreRightClick in favor of proper event-type detection
- prevent invoking callback of first item of a sub-menu when clicking on the sub-menu-item (Issue #41)
- providing
opt.$triggerto show event (Issue #39)
- ignoreRightClick would not prevent right click when menu is already open (Issue #38)
- If build() did not return any items, an empty menu was shown (Issue #33)
- Capturing Page Up and Page Down keys to ignore like space (Issue #30)
- Added Home / End keys to jump to first / last command of menu (Issue #29)
- Bug hitting enter in an <input> would yield an error (Issue #28)
- Non-ASCII character in jquery.contextMenu.js caused compatibility issues in Rails (Issue #27)
- Bug contextmenu event was not passed to build() callback (Issue #24)
- Bug sub-menu markers would not display properly in Safari and Chrome (Issue #25)
- Bug Internet Explorer would not close menu when giving input elements focus (Issue #23)
- Bug not set z-index of sub-menus might not overlap the main menu correctly (Issue #22)
- Bug
console.log is undefined
- Bug sub-menus would not properly update their disabled states (Issue #16) [again…]
- Bug sub-menus would not properly adjust width accoring to min-width and max-width (Issue #18)
- Bug sub-menus would not properly update their disabled states (Issue #16)
- Added dynamic menu creation (Issue #15)
- Bug positioning <menu> when trigger element is
position:fixed(Issue #14)
- Bug key handler would caputure all key strokes while menu was visible (essentially disabling F5 and co.)
- Bug opt.$trigger was not available to disabled callbacks
- jQuery bumped to 1.7.1
- Bug where <menu> imports would not pass action (click event) properly
- Upgraded to jQuery 1.7 (changed dependecy!)
- Added internal events
contextmenu:focus,contextmenu:blurandcontextmenu:hide - Added custom <command> types
- Bug where
classNamewasn't properly set on <menu>
- Added support for accesskeys
- Bug where two sub-menus could be open simultaneously
- Bug in HTML5 import
- Bug in HTML5 detection
- Added compatibility to <menuitem> for Firefox 8
- Upgraded to jQuery 1.6.2
- Bug #1 TypeError on HTML5 action passthru
- Bug #2 disbaled callback not invoked properly
- Feature #3 auto-hide option for hover trigger
- Feature #4 option to use a single callback for all commands, rather than registering the same function for each item
- Option to ignore right-click (original "contextmenu" event trigger) for non-right-click triggers
- Initial $.contextMenu handler