Home

Awesome

jquery.ui-contextmenu

GitHub version Build Status Selenium Test Status npm jsDelivr,

A jQuery plugin that provides a context menu (based on the standard jQueryUI menu widget).

Status

The latest release is available at npm Registry:

$ npm install ui-contextmenu

GitHub version See also the Change Log.

Demo

Live demo page:<br> sample

See also the unit tests and live examples

More:

Getting Started

First, include dependencies:

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 <a href="https://github.com/mar10/jquery-ui-contextmenu/wiki#initialize-menu-from-an-existing-ul-element"> initialize the menu from embedded <ul> markup</a>.

For more information:

Credits

Thanks to all contributors.

Browser Status Matrix

Selenium Test Status