Usage
$(elements).contextMenu(String menu_id [, Object settings]);
You define your menu structure in your HTML markup. For each menu, place an unordered list in a div with class "contextMenu" and the id you will refer to it by (see the examples). The div can be placed anywhere as it will automatically be hidden by the plugin.
You can have as many menus defined on a page as you like. Each <li> element will act as an option on the menu. Give each <li> a unique id so that actions can be bound to it.
Note: ContextMenu does not currently support nested menus. This feature may be in an upcoming release.
Parameters
menu_id
The id of the menu as defined in your markup. You can bind one or more elements to a menu. Eg $("table td").contextMenu("myMenu") will bind the menu with id "myMenu" to all table cells.
Note: This behaviour has changed from r1 where you needed a "#" before the id
settings
ContextMenu takes an optional settings object that lets you style your menu and bind click handlers to each option. ContextMenu supports the following properties in the settings object:
Note: This behaviour has changed from r1 where you needed a "#" before the id
Defaults to true
Defaults to: 'pageX'
Defaults to: 'pageY'
Changing defaults
In addition to passing style information for each menu via the settings object, you can extend the default options for all menus by calling $.contextMenu.defaults(settings). Every setting except bindings can be used as a default.
Example:
$.contextMenu.defaults({
menuStyle : {
border : "2px solid green"
},
shadow: false,
onContextMenu: function(e) {
alert('Did someone asked for a context menu?!');
}
});
Examples
Example 1 - Basic usage with bindings
RIGHT CLICK FOR DEMO THIS WORKS TOO
Html
<div class="contextMenu" id="myMenu1">
<ul>
<li id="open"><img src="folder.png" /> Open</li>
<li id="email"><img src="email.png" /> Email</li>
<li id="save"><img src="disk.png" /> Save</li>
<li id="close"><img src="cross.png" /> Close</li>
</ul>
</div>
Javascript
$('span.demo1').contextMenu('myMenu1', {
bindings: {
'open': function(t) {
alert('Trigger was '+t.id+'\nAction was Open');
},
'email': function(t) {
alert('Trigger was '+t.id+'\nAction was Email');
},
'save': function(t) {
alert('Trigger was '+t.id+'\nAction was Save');
},
'delete': function(t) {
alert('Trigger was '+t.id+'\nAction was Delete');
}
}
});
The preceding code binds the context menu "myMenu1" to all span elements of class "demo1".
Example 2 - Basic styling
Right clicking anywhere in this paragraph will trigger the context menu.
Html
<div class="contextMenu" id="myMenu2">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<!-- etc... -->
</ul>
</div>
Javascript
$('#demo2').contextMenu('myMenu2', {
menuStyle: {
border: '2px solid #000'
},
itemStyle: {
fontFamily : 'verdana',
backgroundColor : '#666',
color: 'white',
border: 'none',
padding: '1px'
},
itemHoverStyle: {
color: '#fff',
backgroundColor: '#0f0',
border: 'none'
}
});
The preceding code binds the context menu "myMenu2" to the element with id "demo2".
Example 3 - Advanced usage with callbacks
Don't show menu Just first item Show all
Html
<div class="contextMenu" id="myMenu3">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
</ul>
</div>
Javascript
$('span.demo3').contextMenu('myMenu3', {
onContextMenu: function(e) {
if ($(e.target).attr('id') == 'dontShow') return false;
else return true;
},
onShowMenu: function(e, menu) {
if ($(e.target).attr('id') == 'showOne') {
$('#item_2, #item_3', menu).remove();
}
return menu;
}
});
Notes
It is worth noting that by overriding the browser's right click menu this plugin provides a behaviour that is different from what most users will expect. This plugin may be best suited for intranet web applications, where the developer is working in a more controlled environment.
Credits
- A big thanks to John Resig for creating jQuery, and to the excellent development team who continues to make this the best javascript library in town.
- Thanks also to Joern Zaefferer - his Tooltip plugin provided great insight and inspiration.
- Dan G. Switzer, II, for his contributions