jQuery plugin that turns a jQu
,
Define menus fromA jQuery plugin that provides a context menu (based on the standard jQueryUI menu widget).
<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
See also the Change Log.
Live demo page:
See also the unit tests and live examples
More:
Play with jsFiddle or Plunker Run the unit tests. Getting StartedFirst, 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 onfor 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 CreditsThanks to all contributors.
Browser Status Matrix版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
