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.
