在網頁中使用自定義右鍵菜單，實現上皆為使用javascript禁用瀏覽器默認的右鍵菜單，然后在網頁中響應鼠標右鍵事件，彈出自定義的菜單。
類似右鍵菜單的組件網上很多。一般而言，改變瀏覽器的默認菜單應當慎用，這會使多數用戶感到不習慣。但是在企業Web應用中，用戶的使用環境更加可控，在這種應用中使用自定義右鍵菜單會更加適合。
以下列舉幾款比較成熟的jQuery右鍵菜單插件，我們將逐一介紹，請讀者自行比較，並根據自己的需求選擇。
1.VERY SIMPLE CONTEXT MENU-Intekhab A Rizvi
Project Page: http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/
jQuery Very Simple ContextMenu Plugin
使用：
1.在插件主頁下載所需文件。
2.在你的html文件中包含jquery庫，vscontext.jquery.js，css/vscontext.css。
<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="vscontext.jquery.js" type="text/javascript"><!--mce:1--></script>
3.在html中創建要響應右鍵菜單的元素。
<div id="item">右鍵點我</div>
4.創建菜單項目。
<li>的class有seprator的，會在該項下面有一條分割線。
<div >
<ul>
<li ><a id="menu_1" href="javascript:cut();">剪切</a></li>
<li ><a id="menu_2" href="javascript:copy();">復制</a></li>
<li ><a id="menu_3" href="javascript:paste();">粘貼</a></li>
<li ><a id="menu_4" href="javascript:edit();">編輯</a></li>
<li ><a id="menu_5" href="javascript:del();">刪除</a></li>
</ul>
</div>
菜單項的圖標要在css文件里設置相應<li>的背景。
.vs-context-menu li.cut a { background-image: url(icons/cut.png); }
.vs-context-menu li.copy a { background-image: url(icons/copy.png); }
.vs-context-menu li.paste a { background-image: url(icons/paste.png); }
.vs-context-menu li.edit a { background-image: url(icons/edit.png); }
.vs-context-menu li.delete a { background-image: url(icons/delete.png); }
5.初始化菜單，添加菜單事件。
<script type="text/javascript"><!--mce:2--></script>
2.CONTEXT MENU-Cory S.N. LaViska
Project Page: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/
jQuery Context Menu Plugin
使用：見插件官方網站。
Methods:
| disableContextMenu() | 禁用匹配元素上的右鍵菜單。 |
| enableContextMenu() | 啟用匹配元素上的右鍵菜單。 |
| disableContextMenuItems(”#option1,#option2,…”) | 禁用匹配的菜單項，如果參數為null，禁用所有項。 |
| enableContextMenuItems(”#option1,#option2,…”) | 期用匹配的菜單項，如果參數為null，禁用所有項。 |
| destroyContextMenu() | 解除元素與右鍵菜單的綁定。 |
Callback:
| action | 選中的菜單項所對應的動作。 |
| el | 觸發菜單的元素 |
| pos.x | 菜單點擊時，鼠標位置相對於觸發元素的水平位移。 |
| pos.y | 菜單點擊時，鼠標位置相對於觸發元素的垂直位移。 |
| pos.docX | 菜單點擊時，鼠標位置相對於頁面的水平位移。 |
| pos.docY | 菜單點擊時，鼠標位置相對於頁面的垂直位移。 |
3.JEEGOOCONTEXT-Erik van den Berg
Project Page: http://www.planitworks.nl/jeegoocontext/
JEEGOOCONTEXT
菜單可以通過以下兩種方法初始化：
$('selector').jeegoocontext('menu_id');
$('selector').jeegoocontext('menu_id', 'options');
“selector”為菜單組建要綁定的內容，可以是任何jQuery選擇器。
“menu_id”為菜單ID(沒有 “#”)。
“options”為對象，可以配置屬性和回調函數。
所有菜單內容都可以從菜單解綁，只需調用：
$ ('context').nojeegoocontext();
Options properties:
| livequery | Boolean | undefined | Menu | 如為true, 菜單內容通過livequery生成並動態加載。 |
| hoverClass | String | ‘hover’ | Menu | 這個CSS類在鼠標懸停在菜單項或其直接子項時被設置。 |
| activeClass | String | ‘active’ | Global | 這個CSS類設置給當前活動的菜單 (右鍵點擊會彈出菜單的區域)。 這個變量是全局的，在使用多個菜單時只需要設置一次。如果重復設置，其值為最后提供的。 |
| menuClass | String | ‘jeegoocontext’ | Global | 所有的菜單都必須包含這個CSS類。這個變量是全局的，在使用多個菜單時只需要設置一次。如果重復設置，其值為最后提供的。 |
| autoAddSubmenuArrows | Boolean | true | Menu | 如為true，則自動為有子項的菜單項添加指示箭頭。 |
| submenuClass | String | ‘submenu’ | Menu | 如果autoAddSubmenuArrows為true, 這個類設置給菜單項中包含小箭頭的<span>元素。 |
| separatorClass | String | ‘separator’ | Menu | 當某個菜單項含有此類，則在按鍵盤上下鍵切換菜單項時，該菜單項被跳過。 |
| fadeIn | Number | 200 | Menu | 菜單和子級菜單淡入的時間，單位為毫秒。 |
| delay | Number | 300 | Menu | 鼠標移出父菜單項時，其子菜單隱藏的延遲時間，單位為毫秒。 |
| keyDelay | Number | 100 | Menu | 上下鍵切換菜單項的延遲時間，單位為毫秒。 |
| widthOverflowOffset | Number | 0 | Menu | 可以在寬度溢出時使用。例如設置為20時，菜單和子菜單的右部總是離窗口右邊界有20px的間距。 |
| heightOverflowOffset | Number | 0 | Menu | 可以在高度溢出時使用。例如設置為20時，菜單和子菜單的底部總是離窗口下邊界有20px的間距。 |
| submenuLeftOffset | Number | 0 | Menu | 子菜單相對於父菜單的水平位移。如為-3，每個子菜單左部將有3px與父菜單重疊。 |
| submenuTopOffset | Number | 0 | Menu | 子菜單相對於父菜單的垂直位移。如為-3，每個子菜單將比其父菜單項高出3px。當然，在高度溢出的情況下，此值被忽略。 |
| operaEvent | String | ‘dblclick’ | Menu | 在Opera的9.5以前老版本中瀏覽器右鍵菜單時是禁止重寫的，這個事件用來定義在Opera中如何打開菜單。 |
| event | String | undefined | Menu | 此項被設置時，定義的事件將用來取代右鍵打開菜單。優先於operaEvent屬性。例如，設置為’click’將使用左鍵打開菜單。 |
Options callbacks
可設置以下4個回調：
onShowonHoveronSelectonHide
每個回調接收兩個參數：e 和 context，e為該事件的來源元素，context為菜單彈出所在的區域。利用這些回調函數，可以用return false的方法取消菜單事件的默認行為。
| onShow | menu | Right-click on bound context. | 隱藏頁面上所有菜單。在頁面上刪除所有處於active的菜單及菜單項的active類。為當前點擊的內容添加active類。淡入菜單。 |
| onHover | menu-item | Mouseover on menu-item. | 定位並淡入子級菜單。 |
| onSelect | menu-item | Click on menu-item. | 刪除當前處於active的菜單或菜單項的active類。隱藏菜單。 |
| onHide | menu | Click on document. | 在頁面上刪除所有處於active的菜單及菜單項的active類。隱藏菜單。 |
4.JQUERY CONTEXT MENU SCRIPT-Dynamic Drive
Project Page: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm
jQuery Context Menu script
這也是一個簡單的右鍵菜單，菜單內容同樣用<ul>和<li>嵌套構造多級菜單。使用方法參看插件頁面。
5.CONTEXT MENU-Chris Domigan
Project Page: http://www.trendskitchens.co.nz/jquery/contextmenu/
ContextMenu plugin
這也是一個名為Context Menu的插件。
使用：
參數：
menu_id
通過引用菜單的ID，你可以在多個元素上綁定相同的菜單。如：
$("table td").contextMenu("myMenu")
將會把ID為”myMenu”的菜單綁定到所有的表格單元格上。
settings
settings支持以下屬性：
| bindings | 包含”id”:function對的對象。提供的函數為點擊時的動作。觸發菜單的元素作為第一個參數傳遞給該句柄。 |
| menuStyle | 包含styleName:value對的對象，定義菜單容器ul的樣式。 |
| itemStyle | 包含styleName:value對的對象，定義菜單項li的樣式。 |
| itemHoverStyle | 包含styleName:value對的對象，定義菜單項li的懸停樣式。 |
| shadow | 布爾值，默認為true。菜單是否顯示陰影。 |
| eventPosX | 允許你定義菜單彈出的位置，默認為pageX。IE6下需設置為clientX。 |
| eventPosY | 允許你定義菜單彈出的位置，默認為pageX。IE6下需設置為clientY。 |
| onContextMenu(event) | 在菜單顯示前調用。如果返回false，將不顯示菜單。 |
| onShowMenu(event, menu) | 在菜單顯示前調用。它將傳遞一個reference給菜單元素，並允許你在菜單顯示之前手動修改輸出，你可以在菜單顯示給用戶之前，顯示或隱藏參數或其他任何東西。該函數必須返回menu |
另外的，你可以調用：
$.contextMenu.defaults(settings)
為所有菜單定義一個默認樣式。
6.JQUERY CONTEXTMENU PLUGIN-Matt Kruse
Project Page: http://www.javascripttoolbox.com/lib/contextmenu/index.php
這又是一個名叫ContextMenu的右鍵菜單插件。這個插件非常強大，作者寫有一套Javascript Toolbox。
jQuery ContextMenu Plugin
使用：
$(function() {
$(".context").contextMenu([menu], {options});
});
菜單數組結構：
[
// Key = Option Content, Value = function to execute when option is clicked
{ 'Option Content' : function(menuItemClicked,menuObject) { } } ,
// A constant to represent a separator item
$.contextMenu.separator,
// A more complex option with each option declared explicitly
// Key = Option Content, Value = Object defining properties
{ 'Advanced Option' :
{
// 所有的屬性都是可選的
// The function to be executed when the option is clicked.
// Arguments passed to this function are:
// menuItemClicked - A reference to the DIV containing the option clicked
// menuObject - A reference to the contextMenu object
// Return false to not close the menu when the option is clicked.
// Return anything else (or nothing) for normal behavior
onclick: function(menuItemClicked,menuObject) { },
// An additional class name to apply to the option
className: 'name',
// The class name to apply to the option when it is hovered over
hoverClassName: 'name',
// The background-image to use for this icon.
// If a theme doesn't support background images, it won't be displayed.
// A theme's CSS should explicitly take this into account.
icon: 'image.gif',
// Set to true to disable an option.
disabled: false,
// Title attribute text to show when the mouse is over an option
title: 'Title Text',
// Function to call when this option is hovered over.
// Arguments passed to this function are:
// className - The class name (string) that is defined in the options
// to be applied for hover
hoverItem: function(className) { },
// Function to call when this option is no longer hovered over.
// Arguments passed to this function are:
// className - The class name (string) that is defined in the options
// to be removed
hoverItemOut: function(className) { }
}
}
]
參數：
{
// true|false 是否顯示菜單陰影
shadow:true,
// 菜單陰影的位置偏移，
// 如果設置了，覆蓋單獨的X, Y偏移
shadowOffset:0,
// 菜單陰影的偏移, X, Y
// (可以是負數)
shadowOffsetX:5,
shadowOffsetY:5,
// 陰影默認和菜單一樣大，這里的值讓陰影比菜單大或小一點
// 這里設置為-3使看上去效果最好
shadowWidthAdjust:-3,
shadowHeightAdjust:-3,
// 陰影透明度
shadowOpacity:.2,
// 設置給顯示陰影的div的class
shadowClass:'context-menu-shadow',
// 陰影顏色
shadowColor:'black',
// 菜單相對鼠標點擊位置的偏移
offsetX:0,
offsetY:0,
// jQuery選擇器，定義菜單attach的DOM
appendTo:'body',
// 菜單顯示方向
direction:'down',
// 保持菜單在屏幕可見區域
constrainToScreen:true,
// jQuery過渡效果，顯示和隱藏菜單
showTransition:'show',
hideTransition:'hide',
// 過渡的速度 - slow/normal/fast/#ms
showSpeed:'',
hideSpeed:'',
// 顯示/隱藏菜單以后的回調函數
showCallback:null,
hideCallback:null,
// CSS 類名 to apply to the generated menu HTML.
// 參見http://www.JavascriptToolbox.com/lib/contextmenu/#themes
className:'context-menu',
itemClassName:'context-menu-item',
itemHoverClassName:'context-menu-item-hover',
disabledItemClassName:'context-menu-item-disabled',
disabledItemHoverClassName:'context-menu-item-disabled-hover',
separatorClassName:'context-menu-separator',
innerDivClassName:'context-menu-item-inner',
// 類名前綴 to prepend to the theme name for css styling
themePrefix:'context-menu-theme-',
// 主題名，包括: 'default','xp','vista','osx','human','gloss'
// Multiple themes may be applied with a comma-separated list.
theme:'default',
// A flag to determine if an iframe shim should be used for <=IE6 on Windows
// This is to prevent selectbox/flash/etc bleed-thru.
// If animations cause problems in <=IE6 and you don't _need_ an iframe,
// set this to false.
useIframe:/*@cc_on @*//*@if (@_win32) true, @else @*/false,/*@end @*/
// 構造菜單
// Arguments:
// menu: Either String, Function, or Array
// String - a jQuery selector used to get the menu content on the page
// Function - Function to run each time menu is displayed. This
// function should return an Array of menu options
// Array - An array of options in the required format
// opts: An Object of options, overriding any or all of the options here
// Returns:
// contextMenu object
create: function(menu,opts) { },
// Create the iframe object to show behind the menu.
// Arguments: none
// Returns: iframe object
createIframe: function() { } ,
// Accept an Array representing a menu structure and turn it into HTML
// Arguments:
// menu: The Array of options
// cmenu: The contextMenu object
// Returns:
// DOM object containing the html for the menu
createMenu: function(menu,cmenu) { },
// Create the DOM object for an individual option, called by createMenu
// Arguments:
// label: The text to display
// obj: Either a Function or an Object
// Function - runs when the option is clicked
// Object - an Option structure as described in Menu Array Structure
// Returns:
// DOM object containing html for a single option
createMenuItem: function(label,obj) { },
// 創建一個分割線行
// Arguments: none
// Returns:
// DOM object containing html for the separator
createSeparator: function() { },
// Determine if an individual item is currently disabled. This is called each
// time the item is hovered or clicked because the disabled status may change
// at any time. You can override this function with app-specific functionality
// to determine which options should be disabled based on business rules.
// Arguments:
// item: DOM object of the Option being checked
// Returns:
// boolean
isItemDisabled: function(item) { },
// 鼠標移入移出調用
// no return value
// Arguments:
// className: The hover class to apply or remove
// Returns:
// none
hoverItem: function(className) { },
hoverItemOut: function(className) { },
// 在菜單后面創建用來顯示陰影的DOM元素
// Arguments:
// cmenu: contextMenu object
// Returns:
// DOM object containing html for the shadow
createShadow: function(cmenu) { },
// Display the shadow object, given the position of the menu itself.
// Arguments:
// x: The x (left) position of the menu
// y: The y (top) position of the menu
// e: The event that triggered the context menu
// Returns:
// none
showShadow: function(x,y,e) { },
// A hook to call before the menu is shown, in case special processing needs
// to be done. Using this you can modify the menu contents, etc on the fly.
// Arguments:
// none
// Returns:
// boolean: false to cancel the default show operation, true to work as normal
beforeShow: function() { return true; },
// 使用指定的過渡方式使菜單可見
// Arguments:
// target: The object that originally caught the contextmenu event
// e: The original event
// Returns:
// none
show: function(target,e) { },
// 得到菜單應該顯示的位置，給出右擊事件的x, y
// Arguments:
// clickX: The x (left) position of the click event
// clickY: The y (top) position of the click event
// cmenu: The contextMenu object
// e: The original event
// Returns:
// 指定菜單顯示的位置 {'x':x,'y':y}
getPosition: function(clickX,clickY,cmenu,e) { },
// 隱藏菜單
// Arguments:
// none
// Returns:
// none
hide: function() { }
}
設置默認參數：
// 關閉所有菜單的陰影
$.contextMenu.shadow = false;
// 設置所有菜單的主題為'xp'
$.contextMenu.theme = 'xp';
7.CONTEXTMENU-Xuanye
Project Page: http://code.google.com/p/xjplugin/source/browse/trunk/ControlsSample/Javascripts/Plugins/jquery.contextmenu.js
這是一個國人在另一個右鍵菜單腳本的基礎上，修改bug並jQuery插件化得到的插件……小巧易用，功能還不錯，菜單內容為json傳入，而不是把ul li格式化。
ContextMenu
話不多說，直接上Demo完整代碼。參數使用方法請看參看注釋和示例。
jquery.contextmenu.js
/* --------------------------------------------------
參數說明
option: {width:Number, items:Array, onShow:Function, rule:JSON}
成員語法(三種形式) -- para.items
-> {text:String, icon:String, type:String, alias:String, width:Number, items:Array} -- 菜單組
-> {text:String, icon:String, type:String, alias:String, action:Function } -- 菜單項
-> {type:String} -- 菜單分隔線
--------------------------------------------------*/
(function($) {
function returnfalse() { return false; };
$.fn.contextmenu = function(option) {
option = $.extend({ alias: "cmroot", width: 150 }, option);
var ruleName = null, target = null,
groups = {}, mitems = {}, actions = {}, showGroups = [],
itemTpl = "<div unselectable=on><nobr unselectable=on><img src='$[icon]' align='absmiddle'/><span unselectable=on>$[text]</span></nobr></div>";
var gTemplet = $("<div/>").addClass("b-m-mpanel").attr("unselectable", "on").css("display", "none");
var iTemplet = $("<div/>").addClass("b-m-item").attr("unselectable", "on");
var sTemplet = $("<div/>").addClass("b-m-split");
//創建菜單組
var buildGroup = function(obj) {
groups[obj.alias] = this;
this.gidx = obj.alias;
this.id = obj.alias;
if (obj.disable) {
this.disable = obj.disable;
this.className = "b-m-idisable";
}
$(this).width(obj.width).click(returnfalse).mousedown(returnfalse).appendTo($("body"));
obj = null;
return this;
};
var buildItem = function(obj) {
var T = this;
T.title = obj.text;
T.idx = obj.alias;
T.gidx = obj.gidx;
T.data = obj;
T.innerHTML = itemTpl.replace(/\$\[([^\]]+)\]/g, function() {
return obj[arguments[1]];
});
if (obj.disable) {
T.disable = obj.disable;
T.className = "b-m-idisable";
}
obj.items && (T.group = true);
obj.action && (actions[obj.alias] = obj.action);
mitems[obj.alias] = T;
T = obj = null;
return this;
};
//添加菜單項
var addItems = function(gidx, items) {
var tmp = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type == "splitLine") {
//菜單分隔線
tmp = sTemplet.clone()[0];
} else {
items[i].gidx = gidx;
if (items[i].type == "group") {
//菜單組
buildGroup.apply(gTemplet.clone()[0], [items[i]]);
arguments.callee(items[i].alias, items[i].items);
items[i].type = "arrow";
tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
} else {
//菜單項
items[i].type = "ibody";
tmp = buildItem.apply(iTemplet.clone()[0], [items[i]]);
$(tmp).click(function(e) {
if (!this.disable) {
if ($.isFunction(actions[this.idx])) {
actions[this.idx].call(this, target);
}
hideMenuPane();
}
return false;
});
} //Endif
$(tmp).bind("contextmenu", returnfalse).hover(overItem, outItem);
} //Endif
groups[gidx].appendChild(tmp);
tmp = items[i] = items[i].items = null;
} //Endfor
gidx = items = null;
};
var overItem = function(e) {
//如果菜單項不可用
if (this.disable)
return false;
hideMenuPane.call(groups[this.gidx]);
//如果是菜單組
if (this.group) {
var pos = $(this).offset();
var width = $(this).outerWidth();
showMenuGroup.apply(groups[this.idx], [pos, width]);
}
this.className = "b-m-ifocus";
return false;
};
//菜單項失去焦點
var outItem = function(e) {
//如果菜單項不可用
if (this.disable )
return false;
if (!this.group) {
//菜單項
this.className = "b-m-item";
} //Endif
return false;
};
//在指定位置顯示指定的菜單組
var showMenuGroup = function(pos, width) {
var bwidth = $("body").width();
var bheight = document.documentElement.clientHeight;
var mwidth = $(this).outerWidth();
var mheight = $(this).outerHeight();
pos.left = (pos.left + width + mwidth > bwidth) ? (pos.left - mwidth < 0 ? 0 : pos.left - mwidth) : pos.left + width;
pos.top = (pos.top + mheight > bheight) ? (pos.top - mheight + (width > 0 ? 25 : 0) < 0 ? 0 : pos.top - mheight + (width > 0 ? 25 : 0)) : pos.top;
$(this).css(pos).show();
showGroups.push(this.gidx);
};
//隱藏菜單組
var hideMenuPane = function() {
var alias = null;
for (var i = showGroups.length - 1; i >= 0; i--) {
if (showGroups[i] == this.gidx)
break;
alias = showGroups.pop();
groups[alias].style.display = "none";
mitems[alias] && (mitems[alias].className = "b-m-item");
} //Endfor
//CollectGarbage();
};
function applyRule(rule) {
if (ruleName && ruleName == rule.name)
return false;
for (var i in mitems)
disable(i, !rule.disable);
for (var i = 0; i < rule.items.length; i++)
disable(rule.items[i], rule.disable);
ruleName = rule.name;
};
function disable(alias, disabled) {
var item = mitems[alias];
item.className = (item.disable = item.lastChild.disabled = disabled) ? "b-m-idisable" : "b-m-item";
};
/** 右鍵菜單顯示 */
function showMenu(e, menutarget) {
target = menutarget;
showMenuGroup.call(groups[this.id], { left: e.pageX, top: e.pageY }, 0);
$(document).one('mousedown', hideMenuPane);
}
var $root = $("#" + option.alias);
var root = null;
if ($root.length == 0) {
root = buildGroup.apply(gTemplet.clone()[0], [option]);
root.applyrule = applyRule;
root.showMenu = showMenu;
addItems(option.alias, option.items);
}
else {
root = $root[0];
}
var me = $(this).each(function() {
return $(this).bind('contextmenu', function(e) {
var bShowContext = (option.onContextMenu && $.isFunction(option.onContextMenu)) ? option.onContextMenu.call(this, e) : true;
if (bShowContext) {
if (option.onShow && $.isFunction(option.onShow)) {
option.onShow.call(this, root);
}
root.showMenu(e, this);
}
return false;
});
});
//設置顯示規則
if (option.rule) {
applyRule(option.rule);
}
gTemplet = iTemplet = sTemplet = itemTpl = buildGroup = buildItem = null;
addItems = overItem = outItem = null;
//CollectGarbage();
return me;
}
})(jQuery);
jquery.contextmenu.css：
@CHARSET "UTF-8";
html
{
margin:0px;
padding:0px;
}
body
{
margin: 0;
background-color: #fff;
font-size: 12px;
font-family: "微軟雅黑" , "宋體" ,Verdana;
padding: 0;
height: 100%;
width:100%;
}
div, span
{
font-family: "微軟雅黑", "宋體" ,Verdana;
}
input[type='text']
{
border: solid 1px #3C7FB1;
height:18px;
}
input[type=checkbox]
{
border: none;
}
input[type=radio]
{
border: none;
}
select
{
border: #3C7FB1 1px solid;
}
h1{
font-size:16px;
text-align:center;
padding:10px 0;
}
H2 {
font-size: 14px;
}
FIELDSET {
border: solid 1px #CCC;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding: 1em 2em;
margin: 1em 0em;
}
LEGEND {
color: #333;
font-size: 14px;
padding: 0em .5em;
font-weight:bold;
}
.ellipsis
{
white-space: nowrap;
text-overflow: ellipsis; /* for internet explorer */
overflow: hidden;
display: block;
}
html > body .ellipsis
{
clear: both;
}
a.imgbtn
{
color: #000000;
}
.important
{
color:Red;
}
/*--------------------------下面是菜單css---------------------*/
.b-m-mpanel {
background: #F0F0F0 url(images/contextmenu/menu_bg.gif) left repeat-y;
border: 1px solid #718BB7;
padding: 2px 0;
position: absolute;
z-index: 99997;
left:0px;
top:0px;
}
.b-m-split {
height: 6px;
background: url(images/contextmenu/m_splitLine.gif) center repeat-x;
font-size: 0px;
margin: 0 2px;
}
.b-m-item, .b-m-idisable
{
padding: 4px 2px;
margin: 0 2px 0 3px;
cursor: normal;
line-height:100%;
}
.b-m-idisable
{
color:#808080;
}
.b-m-ibody, .b-m-arrow {
overflow: hidden;
text-overflow: ellipsis;
}
.b-m-arrow {
background: url(images/contextmenu/m_arrow.gif) right no-repeat;
}
.b-m-idisable .b-m-arrow
{
background:none;
}
.b-m-item img, .b-m-ifocus img, .b-m-idisable img {
margin-right: 8px;
}
.b-m-ifocus {
background: url(images/contextmenu/m_item.gif) repeat-x bottom;
border: 1px solid #AACCF6;
padding: 3px 1px ;
margin: 0 2px 0 3px;
cursor: normal;
line-height:100%;
}
.b-m-idisable img {
visibility:hidden;
}
jquery.contextmenu.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Gao Xiang" />
<title>jQuery 右鍵菜單</title>
<link href="jquery.contextmenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.target
{
margin:40px;
width:200px;
height:60px;
border:solid 1px #ffccee;
padding:5px;
background-color:#f8f8f8;
color:#000000;
}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
var option = { width: 160, items: [
{ text: "添加節點", icon: "images/icons/ico2.gif", alias: "Add node", type: "group", width: 160, items: [
{ text: "路由器", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
{ text: "收音機", icon: "images/icons/ico4-2.gif", alias: "收音機", action: menuAction },
{ text: "洗衣機", icon: "images/icons/ico4-1-1.gif", alias: "洗衣機", action: menuAction },
{ text: "打印機", icon: "images/icons/ico4-1-1.gif", alias: "打印機", type: "group", width: 160, items: [
{ text: "佳能", icon: "images/icons/ico4-2.gif", alias: "3-2", action: menuAction },
{ text: "聯想", icon: "images/icons/ico4-1-1.gif", alias: "聯想", action: menuAction },
{ text: "愛普生", icon: "images/icons/ico4-1-1.gif", alias: "愛普生", action: menuAction },
{ text: "惠普", icon: "images/icons/ico4-1-1.gif", alias: "惠普", type: "group", width: 160, items: [
{ text: "HP-ZX100", icon: "images/icons/ico4-2.gif", alias: "HP-ZX100", action: menuAction },
{ text: "HP-ZX200", icon: "images/icons/ico4-1-1.gif", alias: "HP-ZX200", action: menuAction },
{ text: "HP-ZX220FP+", icon: "images/icons/ico4-1-1.gif", alias: "HP-ZX220FP+", action: menuAction }
]
}
]
},
{ text: "電冰箱", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
{ text: "電視機", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction },
{ text: "微波爐", icon: "images/icons/ico4-1-1.gif", alias: "3-2", action: menuAction }
]
},
{ text: "編輯節點", icon: "images/icons/ico3.gif", alias: "Edit node", action: menuAction },
{ text: "刪除節點", icon: "images/icons/ico3.gif", alias: "Remove node", action: menuAction },
{ type: "splitLine" },
{ text: "保存位置", icon: "images/icons/ico4.gif", alias: "1-4", action: menuAction },
{ text: "重新排列", icon: "images/icons/ico4.gif", alias: "1-4", action: menuAction },
{ type: "splitLine" },
{ text: "視圖", icon: "images/icons/ico6.gif", alias: "1-6", type: "group", width: 180, items: [
{ text: "展開所有節點", icon: "images/icons/ico6-1.gif", alias: "4-1", action: menuAction },
{ text: "收起所有節點", icon: "images/icons/ico6-2.gif", alias: "4-2", action: menuAction }
]
},
{ type: "splitLine" },
{ text: "屬性", icon: "images/icons/ico5.gif", alias: "1-5", action: menuAction }
], onShow: applyrule,
onContextMenu: BeforeContextMenu
};
function menuAction() {
alert(this.data.alias);
}
function applyrule(menu) {
if (this.id == "target2") {
menu.applyrule({ name: "target2",
disable: true,
items: ["Edit node", "Remove node", "愛普生", "洗衣機", "收音機"]
});
}
else {
menu.applyrule({ name: "all",
disable: true,
items: []
});
}
}
function BeforeContextMenu() {
return this.id != "target3";
}
$("#target,#target2,#target3").contextmenu(option);
});
</script>
</head>
<body>
<div id="target" >所有菜單</div>
<div id="target2" >指定disable菜單項</div>
<div id="target3" >不可用</div>
</body>
</html>
<script>
//所有class為demo1的span標簽都會綁定此右鍵菜單 $('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'); } } }); //所有html元素id為demo2的綁定此右鍵菜單 $('#demo2').contextMenu('myMenu2', { //菜單樣式 menuStyle: { border: '2px solid #000' }, //菜單項樣式 itemStyle: { fontFamily : 'verdana', backgroundColor : 'green', color: 'white', border: 'none', padding: '1px' }, //菜單項鼠標放在上面樣式 itemHoverStyle: { color: 'blue', backgroundColor: 'red', border: 'none' }, //事件 bindings: { 'item_1': function(t) { alert('Trigger was '+t.id+'\nAction was item_1'); }, 'item_2': function(t) { alert('Trigger was '+t.id+'\nAction was item_2'); }, 'item_3': function(t) { alert('Trigger was '+t.id+'\nAction was item_3'); }, 'item_4': function(t) { alert('Trigger was '+t.id+'\nAction was item_4'); } } }); //所有div標簽class為demo3的綁定此右鍵菜單 $('div.demo3').contextMenu('myMenu3', { //重寫onContextMenu和onShowMenu事件 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; } });
</script>
</HTML>
效果圖: