ui-contextmenu

Turn a jQuery UI Menu widget into a contextmenu.

Usage no npm install needed!

<script type="module">
  import uiContextmenu from 'https://cdn.skypack.dev/ui-contextmenu';
</script>

README

jquery.ui-contextmenu

GitHub version Build Status Selenium Test Status npm

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

GitHub version See also the Change Log.

Demo

Live demo page:
sample

See also the unit tests and live examples

More:

Getting Started

First, include dependencies:

  • jQuery 1.7+ (1.10 or later recommended)
  • jQuery UI 1.9+ (at least core, widget, menu), 1.11+ recommended
  • One of the ThemeRoller CSS themes or a custom one
  • jquery.ui-contextmenu.js (also available as CDN on jsDelivr, cdnjs, or UNPKG)
<head>
    <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/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:

Credits

Thanks to all contributors.

Browser Status Matrix

Selenium Test Status