目前做的項目需要在頁面裡面用右鍵菜單，在網上找到兩種jquery的右鍵菜單插件，但是都有各種問題。是以就自己動手把兩種插件結合了下。
修改後的右鍵菜單插架可以根據綁定的觸發頁面元素不同，複用同一個菜單使之根據觸發頁面元素有不同的行為。
支援多個個觸發頁面元素複用同一個菜單時，分開禁用或恢複禁用菜單或某些菜單項目。
一些說明:
1.菜單的樣式由css檔案contextMenu.css決定，可以根據需要自行修改,請根據實際情況設定z-index的值，保證菜單在最高的一層
2.請将菜單直接放于body下，至少不要讓菜單的樣式需要受除body外的樣式來決定，因為在綁定的時候會把菜單移動到body下面。
3.這個插件是我根據http://www.trendskitchens.co.nz/jquery/contextmenu/和
http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/在後者的基礎上修改的。
4.目前粗略測試在ie8,chrome,firefox下面工作正常.
5.例子和js代碼打包在附件的檔案中
下面是一個例子：
Html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ContextMenu.css" rel="stylesheet" type="text/css" />
<script src="js/lib/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.contextMenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").contextMenu({
menuId: 'contextMenu',
onContextMenuItemSelected:function(menuItemId, $triggerElement){
alert('trigger1'+menuItemId+' '+$triggerElement.attr('id'))
},
onContextMenuShow:function($triggerElement){
alert('trigger1'+$triggerElement.attr('id'))
showShadow:false
});
$("#trigger1").disableContextMenuItems(['edit'])
//$("#trigger1").enableContextMenuItems(['edit']) //解除某個菜單項的屏蔽
//$("#trigger1").disableContextMenu(); //屏蔽菜單
$("#trigger2").contextMenu({
alert('trigger2'+menuItemId+' '+$triggerElement.attr('id'))
alert('trigger2'+$triggerElement.attr('id'))
}
$("#trigger2").disableContextMenuItems(['delete']) //屏蔽某個菜單項
//$("#trigger2").enableContextMenuItems(['delete']) //解除某個菜單項的屏蔽
})
</script>
</head>
<body>
<ul id="contextMenu" class="contextMenu">
<li id="delete" class="delete">
<a>删除</a>
</li>
<li id="edit" class="edit">
<a>修改</a>
</ul>
<div id="trigger1" style="width:100px;height:100px; font-weight: bold;">>trigger1</div>
<div id="trigger2" style="width:100px;height:100px; font-weight: bold;">>trigger2</div>
</body>
</html>
插件的代碼如下:
Js代碼
// 原作者資訊：
// jQuery Context Menu Plugin
//
// Version 1.01
// Cory S.N. LaViska
// A Beautiful Site (http://abeautifulsite.net/)
// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
// Terms of Use
// This plugin is dual-licensed under the GNU General Public License
// and the MIT License and is copyright A Beautiful Site, LLC.
// mod資訊：
// modified by shadowlin 2011-03-02
if(jQuery)(function(){
//全局變量
var $shadow;
var defaults={
menuId:null,
onContextMenuItemSelected:function(menuItemId, $triggerElement) {
},
onContextMenuShow:function($triggerElement){
showShadow:true,
fadeInSpeed:150,
fadeOutSpeed:75
}
$.extend($.fn, {
contextMenu: function(o) {
// Defaults
if( o.menuId == undefined ) return false;//如果沒有menuId則退出
if( o.fadeInSpeed == undefined ) o.fadeInSpeed = defaults.fadeInSpeed;
if( o.fadeOutSpeed == undefined ) o.fadeOutSpeed = defaults.fadeOutSpeed;
if( o.showShadow == undefined ) o.showShadow = defaults.showShadow;
// 0 needs to be -1 for expected results (no fade)
if( o.fadeInSpeed == 0 ) o.fadeInSpeed = -1;
if( o.fadeOutSpeed == 0 ) o.fadeOutSpeed = -1;
// Loop each context menu
var $menu = $('#' + o.menuId);
//把menu移動到body下面，避免計算位置的時候出現問題
if($menu.data('isMovedToBody')!=true){//隻移動一次
$menu.appendTo('body').data('isMovedToBody',true);
}
if(!$shadow){
$shadow = $('<div></div>').css( {
backgroundColor : '#000',
position : 'absolute',
opacity : 0.4
}).appendTo('body').hide();
$(this).each(function(){
var $triggerElement = $(this);
$triggerElement.data('contextMenu',{
$menu:$menu,
isEnabled:true,
disabledMenuItemIdList:[]
})
// Add contextMenu class
$menu.addClass('contextMenu');
$triggerElement.unbind('contextmenu').bind('contextmenu',function(e){
var $currentTriggerElement=$(this);
var contextMenu=$currentTriggerElement.data('contextMenu');
//檢查菜單是否被屏蔽
if($currentTriggerElement.data('contextMenu').isEnabled===false) return false;
//如果有定義onContextMenuShow,在顯示前調用
if(typeof o.onContextMenuShow=='function'){
o.onContextMenuShow($currentTriggerElement);
}
//顯示右鍵菜單
showMenu(e);
//綁定菜單項
$menu.find('li').removeClass('disabled');
var disabledMenuItemIdList=contextMenu.disabledMenuItemIdList;
var queryStr='';
if(disabledMenuItemIdList.length>0){
var strDisabledMenuItemIdList='';
for(var index in disabledMenuItemIdList){
var disabledMenuItemId=disabledMenuItemIdList[index];
if(index==0){
strDisabledMenuItemIdList+='#'+disabledMenuItemId;
}else{
strDisabledMenuItemIdList+=',#'+disabledMenuItemId;
}
queryStr='li:not('+strDisabledMenuItemIdList+')';
$menu.find(strDisabledMenuItemIdList).addClass('disabled');
}else{
queryStr='li';
$menu.find('li').find('a').unbind('click');
$menu.find(queryStr).find('a').bind('click',$currentTriggerElement,function(event){
// Callback
var callback=o.onContextMenuItemSelected;
if(typeof callback=='function' ){
callback( $(this).parent().attr('id'),event.data);
hideMenu();
return false;
$(document).unbind('mousedown').bind('mousedown',function(event) {
if($(event.target).parents('#'+o.menuId).html()==null){
hideMenu();
//阻止預設右鍵菜單
return false;
// Disable text selection
if( $.browser.mozilla ) {
$menu.each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
} else if( $.browser.msie ) {
$menu.each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
} else {
$menu.each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
}
});
function showMenu(event){
//顯示菜單
$menu.css({
'left' : event.pageX,
'top' : event.pageY
}).fadeIn(o.fadeInSpeed);
//顯示陰影
if(o.showShadow){
$shadow.css('zIndex',$menu.css('zIndex')-1);
$shadow.css( {
width : $menu.outerWidth(),
height : $menu.outerHeight(),
left : event.pageX + 2,
top : event.pageY + 2
}).fadeIn(o.fadeInSpeed);
function hideMenu(){
$menu.fadeOut(o.fadeOutSpeed);
$shadow.fadeOut(o.fadeOutSpeed);
return $(this);
/**
* 參數為id數組，如無參數則disable全部
*/
disableContextMenuItems: function(o) {
var contextMenu=$(this).data('contextMenu');
var $menu=contextMenu.$menu;
if(o==undefined) {
var list=[];
$menu.find('li').each(function(){
var menuItemId=$(this).attr('id');
list.push(menuItemId);
})
contextMenu.disabledMenuItemIdList=list
}else{
contextMenu.disabledMenuItemIdList=o
return( $(this) );
// Enable context menu items on the fly
enableContextMenuItems: function(o) {
contextMenu.disabledMenuItemIdList=[]
contextMenu.disabledMenuItemIdList=$.grep(contextMenu.disabledMenuItemIdList,function(value,index){
if($.inArray(value,o)!=-1){
return false;
}else{
return true
// Disable context menu(s)
disableContextMenu: function() {
$(this).each( function() {
contextMenu.isEnabled=false;
// Enable context menu(s)
enableContextMenu: function() {
contextMenu.isEnabled=true;
// Destroy context menu(s)
destroyContextMenu: function() {
$(this).removeData('contextMenu');
}
});
})(jQuery);
![Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)