jquery右键菜单插件
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:
bindingsAn object containing "id":function pairs. The supplied function is the action to be performed when the associated item is clicked. The element that triggered the current menu is passed to this handler as the first parameter.Note: This behaviour has changed from r1 where you needed a "#" before the idmenuStyleAn object containing styleName:value pairs for styling the containing <ul> menu.itemStyleAn object containing styleName:value pairs for styling the <li> elements.itemHoverStyleAn object containing styleName:value pairs for styling the hover behaviour of <li> elements.shadowBoolean: display a basic drop shadow on the menu.
Defaults to trueeventPosXAllows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientX".
Defaults to: 'pageX'eventPosYAllows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientY".
Defaults to: 'pageY'onContextMenu(event)A custom event function which runs before the context menu is displayed. If the function returns false the menu is not displayed. This allows you to attach the context menu to a large block element (or the entire document) and then filter on right click whether or not the context menu should be shown.onShowMenu(event, menu)A custom event function which runs before the menu is displayed. It is passed a reference to the menu element and allows you to manipulate the output before the menu is shown. This allows you to hide/show options or anything else you can think of before showing the context menu to the user. This function must return the menu.
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