jQuery Plugins › jQuery Menu Plugins › jquery UI Context Menu

Simple jQuery & jQuery UI Right-Click Context Menu Plugin

File Size: 353 KB
Views Total: 19114
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE7+, FireFox, Opera, Safari#jQuery UI#context menu
Simple jQuery & jQuery UI Right-Click Context Menu Plugin

A jQuery UI and jQuery based plugin that displays a clean and animated context menu by right-clicking in an element or using open and close methods. The context menu can be initialized by command-array and hidden <ul> element. Check the demo page for more information.

You might also like:

Basic Usage:

1. Include jQuery library and jQuery UI on the page

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>

2. Include jquery-ui-contextmenu plugin after jQuery

<script src="../jquery.ui-contextmenu.js" type="text/javascript"></script>

Initialized by command-array

<script type="text/javascript">
$(function(){

/* Init menu by passing an array of entries. */

$(document).contextmenu({
delegate: ".demo",
menu: [
{title: "Cut", cmd: "cut", uiIcon: "ui-icon-scissors"},
{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
{title: "Paste", cmd: "paste", uiIcon: "ui-icon-clipboard", disabled: true },
{title: "----"},
{title: "More", children: [
{title: "Sub 1", cmd: "sub1"},
{title: "Sub 2", cmd: "sub1"}
]}
],
select: function(event, ui) {
var menuId = ui.item.find(">a").attr("href");
alert("select " + menuId + " on " + $(event.relatedTarget).text());
}
});

});
</script>

Initialized by hidden <ul> element

<span class="demo">Right Click Me</span>
<ul id="options" class="ui-helper-hidden">
<li><a href="#action1"><span class="ui-icon custom-icon-firefox"></span>Action 1</a>
<li><a href="#action2"><span class="ui-icon ui-icon-heart"></span>Action 2</a>
<li class="ui-state-disabled"><a href="#action3">Action 3</a>
<li>----
<li><a>Extra</a>
<ul>
<li><a href="#action4">sub4</a>
<li><a href="#action5">sub5</a>
</ul>
</ul>
<script type="text/javascript">
$(function(){

/* Init menu by passing an <ul> element. */

$("#container").contextmenu({
delegate: ".hasmenu2",
//ignoreParentSelect: false,
menu: "#options",
focus: function(event, ui) {
var menuId = ui.item.find(">a").attr("href");
$("#info").text("focus " + menuId);
},
blur: function(event, ui) {
$("#info").text("");
},
beforeOpen: function(event) {
//          alert("beforeopen on " + $(event.relatedTarget).text());
},
open: function(event, ui) {
//          alert("open on " + $(event.relatedTarget).text());
},
select: function(event, ui) {
var menuId = ui.item.find(">a").attr("href");
alert("select " + menuId + " on " + $(event.relatedTarget).text());
}
});

});
</script>

Using open and close methods

<button id="demo">Click Me</button>
<script type="text/javascript">
$(function(){

$("#triggerPopup").click(function(){

$(document).contextmenu("open", $(".demo"));
setTimeout(function(){
$(document).contextmenu("close");
}, 2000);
});
});
</script>

Available options.

// Add this class to the outer <ul>
addClass: "ui-contextmenu",  

// Close menu when window loses focus
closeOnWindowBlur: true,     

// Set keyboard focus to first entry on open
appendTo: "body",     

// Set keyboard focus to first entry on open
autoFocus: false,      

// open menu on browser's `contextmenu` event
autoTrigger: true, 

// selector
delegate: null,       

hide: { effect: "fadeOut", duration: "fast" },

// Don't trigger 'select' for sub-menu parents
ignoreParentSelect: true, 

// selector or jQuery pointing to <UL>, or a definition hash
menu: null,           

// popup positon
position: null,       

// prevent opening the browser's system
// context menu on menu entries
preventContextMenuForPopup: false, 

// disable text selection of target
preventSelect: false, 

show: { effect: "slideDown", duration: "fast" },

// open menu on taphold events (requires external plugins)
taphold: false,       

// Additional options, used when UI Menu is created
uiMenuOptions: {},  

// Events:

// menu about to open; return `false` to prevent opening
beforeOpen: $.noop,   

// menu option lost focus
blur: $.noop,    

// menu was closed
close: $.noop,       

// menu was initialized
create: $.noop,      

// menu was initialized (original UI Menu)
createMenu: $.noop,  

// menu option got focus
focus: $.noop,        

// menu was opened
open: $.noop,         

// menu option was selected; return `false` to prevent closing
select: $.noop

Change Logs:

v1.19.0 (2018-01-24)

  • [FEATURE] Add appendTo option.

v1.18.1 (2017-08-28)

  • [BUGFIX] Fix deprecation warnings when menu with title callback is opened

v1.18.0 (2017-08-27)

  • Refactored entry update methods

v1.17.0 (2017-04-18)

  • [FEATURE] Allow callbacks for disabled, title, and tooltip options
  • [FEATURE] autoFocus skips leading disabled entries.
  • [FEATURE] New option closeOnWindowBlur
  • Use .on() / .off() syntax
  • Add check for missing .delegate option

v1.16.0 (2017-03-31)

  • Pass extraData argument to select and other events.

v1.15.0 (2017-03-19)

  • Pass ui argument to open event.

v1.14.0 (2017-01-31)

  • Update AMD dependency to be compatible with the jQuery 1.12 layout: "jquery-ui/ui/widgets/menu" NOTE: this is not backwards compatible with jQuery 1.11 and before

v1.13.1 (2017-01-28)

  • [BUGFIX] Fix setEntry(title) for titles containing icons
  • [BUGFIX] Fix setEntry({...}) for jQuery UI 1.12

v1.13.0 (2016-08-22)

  • Test with jQuery 3
  • Allow to pass mouse click events to open()
  • Update grunt to 1.0
  • Upate QUnit to 1.23 and refactor tests to use assert

v1.12.0 (2016-05-18)

  • Support jQuery UI 1.12 (wrap menu items in separate <div> tags)
  • new menu option isHeader for category headers.
  • Add jQuery UI 1.12 sample with new 'Base' theme

v1.11.0 (2015-09-11)

  • Allow to show/hide separators

v1.10.0 (2015-06-28)

  • New option tooltip, adds a title attribute to the menu markup

v1.9.0 (2015-04-20)

  • [FEATURE] New option autoFocus, defaults to false
  • [BUGFIX] Fixed AMD dependencies

v1.8.3 (2015-03-09)

  • New option autoFocus, defaults to false

v1.8.2 (2015-02-09)

  • Add "jquery-ui/menu" as AMD dependency
  • Allow custom classes per entry
  • Exception when target element is deleted in select event

v1.8.1 (2014-12-22)

  • New option addClass, defaults to "ui-contextmenu"

v1.8.0 (2014-11-24)

  • [FEATURE] setEntry() supports creating nested menus
  • [FEATURE] beforeOpen event accepts deferred as return value
  • [BUGFIX] entry data attached to parentLi instead of <a>

v1.6.2 (2014-09-06)

  • AMD support (topolm).
  • CDN support

v1.6.1 (2014-08-19)

  •  New option uiMenuOptions allows to pass custom options to UI Menu Widget.

v1.6.0 (2014-08-18)

  • New option uiMenuOptions allows to pass custom options to UI Menu Widget.

v1.5.0 (2014-07-07)

  • [CHANGE] Use data-command="copy" instead of <a href='...'> to store command ids.
  • [FEATURE] Support jQuery UI 1.11.

v1.4.2 (2014-06-25)

  • Update.

v1.4.0 (2014-06-22)

  • [FEATURE] Support bower.
  • [BUGFIX] 'replaceMenu' in beforeOpen causing select: to lose ui.target

v1.3.0 (2014-03-09)

  • [FEATURE] New optional parameter open(..., extraData).
  • [FEATURE] New option autoTrigger: true can be set to false to prevent opening menus on browser's contextmenu event (if you want to use the open() method instead).
  • [FEATURE] New option preventContextMenuForPopupto prevent opening the browser's system context menu on menu entries.
  • [CHANGE] setEntry() and replaceMenu() now allow to define titles with HTML markup.

v1.2.4 (2013-12-25)

  • Fixed 'Double click on .hasmenu currentTarget empy'
  • Fixed 'Not working on XHTML page' (poofeg)
  • Added test matrix for different platforms.

v1.2.3 (2013-10-19)

  • [CHANGE] Detection of separators compliant with UI Menu 1.10
  • [BUGFIX] Fixed setEntry for entries that don't have icons and handlemissing cmd option.

v1.2.2 (2013-07-31)

  • Added ThemeRoller switcher to demo page.
  • Added data option for menu entries (Francis Rath).

v1.2.0 (2013-07-05)

  • Added data option for menu entries

v0.5.0 (2013-06-03)

  • Fixed custom position sample.
  • Fixed replaceMenu()

This awesome jQuery plugin is developed by mar10. For more Advanced Usages, please check the demo page or visit the official website.