jquery.ui-contextmenu
,
A jQuery plugin that provides a context menu (based on the standard jQueryUI menu widget).
- Define menus from
<ul>element or definition list (i.e.[{title: "Paste", cmd: "paste"}, ...]). - Themable using jQuery ThemeRoller.
- Supports delegation (i.e. can be bound to elements that don't exist at the time the context menu is initialized).
- Optional support for touch devices.
Status
The latest release is available at npm Registry:
$ npm install ui-contextmenu
Demo
See also the unit tests and live examples
More:
- Play with jsFiddle or Plunker
- Run the unit tests.
Getting Started
First, include dependencies:
- jQuery 1.7+ (3.x or later recommended)
- jQuery UI 1.9+ (at least core, widget, menu), 1.12+ recommended
- One of the ThemeRoller CSS themes or a custom one
- jquery.ui-contextmenu.js (also available as CDN on
, cdnjs, or UNPKG)
for example
<head> <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="assets/jquery.ui-contextmenu.min.js"></script>Assume we have some HTML elements that we want to attach a popup menu to:
<div id="container"> <div class="hasmenu">AAA</div> <div class="hasmenu">BBB</div> <div class="hasmenu">CCC</div> </div>Now we can enable a context menu like so:
$("#container").contextmenu({ delegate: ".hasmenu", menu: [ {title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"}, {title: "----"}, {title: "More", children: [ {title: "Sub 1", cmd: "sub1"}, {title: "Sub 2", cmd: "sub1"} ]} ], select: function(event, ui) { alert("select " + ui.cmd + " on " + ui.target.text()); } });Alternatively we can initialize the menu from embedded <ul> markup.
For more information:
- Read the Tutorial and API Reference
- Have a look at the Live demo page
- Ask questions on Stackoverflow
- Play with jsFiddle or Plunker
Credits
Thanks to all contributors.
