目前做的项目需要在页面里面用右键菜单，在网上找到两种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);
分享到：
相关推荐
`jQuery-contextMenu`是一款强大的JavaScript插件，专为创建功能丰富的上下文菜单而设计，能够处理大量的元素。这款插件不仅支持传统的右键点击触发，还可以根据需求设置为左键点击显示菜单，极大地提升了用户的交互...
`jQuery contextmenu` 插件就是这样一个工具，它允许开发者轻松创建自定义的右键菜单。本文将详细探讨如何使用这个基于 `jQuery` 的插件，以及如何根据描述中的内容进行修改和定制。 1. **jQuery contextmenu 插件...
**jQuery右键菜单插件ContextJS详解** 在网页开发中，右键菜单通常是增强用户体验的一种常见功能，它能提供快捷的操作选项。`ContextJS`是一个专门为jQuery设计的右键菜单插件，允许开发者轻松地为网页元素添加...
而"jQuery右键菜单实现"是一个常见的需求，它允许用户在网页元素上右击鼠标时弹出一个自定义的菜单，提供额外的功能或选项。这个功能通常通过jQuery插件来实现，例如`jQuery contextMenu`。 `jQuery contextMenu`是...
**一、理解jQuery右键菜单的基本原理** jQuery右键菜单功能主要是通过监听鼠标右键点击事件（`contextmenu`）来触发自定义的菜单展示。当用户在网页上右键点击时，JavaScript会阻止浏览器默认的右键菜单弹出，然后...
Bootstrap Context Menu是一款非常实用的基于Bootstrap的jQuery右键上下文菜单插件。该右键菜单插件可以在多种元素上触发，也可以配合Font Awesome字体图标一起使用，非常的方便。
最后，`jquery.contextmenu.js` 可能是一个预封装好的 jQuery 插件，用于简化右键菜单的实现。这样的插件通常提供了一些配置选项，允许开发者定制菜单的内容、样式、行为等。使用插件的好处是减少代码重复，提高代码...
而jQuery插件，特别是ContextMenu插件，可以让开发者方便地为网页元素添加右键菜单功能。 ContextMenu插件允许我们创建定制的右键菜单，并且对菜单进行各项设置，比如菜单的显示方式、触发元素、菜单项的内容、菜单...
《jQuery右键菜单插件context.js的深度解析与应用》 在前端开发中，交互体验是提升用户体验的关键一环，而右键菜单作为常见的交互元素，能够为用户提供便捷的操作选项。jQuery作为一个轻量级的JavaScript库，其丰富...
根据提供的文件信息，可以总结出以下关于jQuery右键菜单contextMenu使用实例的知识点： 1. jQuery插件介绍：contextMenu是一款用于实现自定义右键菜单的jQuery插件。它允许用户通过右键操作来触发预定义的菜单选项...
用于创建右键弹出菜单的jQuery插件。 标签：jQuery
**jQuery右键菜单插件详解** 在Web开发中，用户交互是至关重要的，而右键菜单作为用户界面的一部分，能够提供便捷的操作入口。jQuery作为一款强大的JavaScript库，为开发者提供了丰富的插件，使得创建自定义右键...
### 三、jQuery右键菜单插件的工作原理 1. **事件监听**：插件首先会监听鼠标右键点击事件，这通常是`contextmenu`事件。 2. **阻止默认行为**：当用户右键点击时，插件会阻止浏览器默认的右键菜单显示。 3. **动态...
实现jQuery右键菜单的一个关键库是`jQuery.contextMenu`插件，该插件提供了方便的API来创建和管理右键菜单。`jQuery.contextMenu`允许开发者定义菜单的配置，包括菜单项、图标、回调函数等。例如，你可以这样使用： ...
要使用这个jQuery右键菜单，首先需要在HTML文档头部引入jQuery库和contextmenu插件的CSS及JS文件。接着，通过jQuery的选择器找到想要添加右键菜单的元素，然后调用`.contextmenu()`方法并传递配置选项。配置选项可以...
相比于传统的HTML菜单，jQuery右键菜单可以更方便地实现动态加载和自定义样式，同时支持多级结构，以满足复杂的需求。 "js多级菜单设置"是指在右键菜单中嵌套子菜单，形成层次结构。例如，一级菜单可以是“编辑”、...
本篇文章将深入探讨jQuery中的ContextMenu插件，这是一种实现右键菜单功能的方法，能够为网页提供更丰富的交互体验。 一、jQuery及其ContextMenu插件简介 jQuery是一个轻量级的JavaScript库，它通过其简洁的API使得...