目前做的项目需要在页面里面用右键菜单，在网上找到两种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代码打包在附件的文件中
下面是一个例子：
<!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({
menuId: 'contextMenu',
onContextMenuItemSelected:function(menuItemId, $triggerElement){
alert('trigger2'+menuItemId+' '+$triggerElement.attr('id'))
},
onContextMenuShow:function($triggerElement){
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>
</li>
</ul>
<div id="trigger1" style="width:100px;height:100px;background-color:green">trigger1</div>
<div id="trigger2" style="width:100px;height:100px;background-color:green">trigger2</div>
</body>
</html>
插件的代码如下:
// 原作者信息：
// 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);
if(o.showShadow){
$shadow.fadeOut(o.fadeOutSpeed);
}
}
return $(this);
},
/**
* 参数为id数组，如无参数则disable全部
*/
disableContextMenuItems: function(o) {
$(this).each(function(){
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) {
$(this).each(function(){
var contextMenu=$(this).data('contextMenu');
var $menu=contextMenu.$menu;
if(o==undefined) {
contextMenu.disabledMenuItemIdList=[]
}else{
contextMenu.disabledMenuItemIdList=$.grep(contextMenu.disabledMenuItemIdList,function(value,index){
if($.inArray(value,o)!=-1){
return false;
}else{
return true
}
})
}
})
return( $(this) );
},
// Disable context menu(s)
disableContextMenu: function() {
$(this).each( function() {
var contextMenu=$(this).data('contextMenu');
contextMenu.isEnabled=false;
});
return( $(this) );
},
// Enable context menu(s)
enableContextMenu: function() {
$(this).each( function() {
var contextMenu=$(this).data('contextMenu');
contextMenu.isEnabled=true;
});
return( $(this) );
},
// Destroy context menu(s)
destroyContextMenu: function() {
$(this).each( function() {
$(this).removeData('contextMenu');
});
return( $(this) );
}
});
})(jQuery);
分享到：
相关推荐
插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: ...通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. ... JQuery右键菜单 </TITLE>
Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发，也可以配合Font Awesome字体图标一起使用，非常的方便。
jQuery右键菜单插件context.js是一款轻量级的网页右键菜单插件context.js。
功能齐全的上下文菜单处理程序，可处理数千个元素。很实用的插件，在网页列表中可实现鼠标右键点击出现操作菜单，提高用户体验。
在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。
contextmenufunction.js jquery-1.4.2.js jquery.contextmenu.css jquery.contextmenu.js 里面的内容就这些。
用于创建右键弹出菜单的jQuery插件。 标签：jQuery
jQuery网页页面滚动自动隐藏导航菜单代码是一款导航菜单在页面向下滚动时会自动进行隐藏，在页面向上滚动时，菜单又会自动出现，共有三种效果。
jquery右键菜单插件，jquery官网推荐，非常好用，可绑定到任意对象，支持各种事件，支持漂亮的图标
很不错的核心基于jquery的右键菜单插件，这个插件的名字叫做：jquery-contextmenu，使用广泛，效果漂亮，调用方便，可快速生成多种风格的网页右键菜单。在其生成的右键菜单中还可以添加单选框和多选框等，功能得到...
主要介绍了jquery插件ContextMenu设置右键菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
改版本是“使用JQUERY 自创的自定义右键菜单插件 ”的重大改进，原始版本不再使用！ 可以对表格，列表，或者单个DOM容器进行右键绑定 菜单项的文字、图标样式，调用方法均可自定义,图标样式定义更为灵活 菜单中分隔...
jQuery鼠标右键点击菜单代码是一款jquery.contextmenu菜单插件下载。
如今Bootstrap这个前端框架已被许多人接受并应用在不同的项目中，其中“开发高效，设备兼容”的特点表现得非常明显。这篇文章主要介绍了使用contextMenu插件实现Bootstrap table弹出右键菜单,需要的朋友可以参考下
jquery插件之右键菜单 很容易学会。 jquery插件之右键菜单 很容易学会。
jquery contextMenu-master jquery右键菜单插件
jquery.contextmenu.r2：jquery右键菜单 jquery.cookie：jquery Cookie操作 jquery.form：jquery表单提交（ajax方式或其它方式自定） jquery.idTabs：jquery选项卡 jquery.pager：分页 jquery.progressbar.min：...