Jquery 右键菜单(ContextMenu)插件

最新推荐文章于 2024-08-13 08:52:21 发布
最新推荐文章于 2024-08-13 08:52:21 发布
阅读量632 收藏
点赞数 1
分类专栏： 页面前端技术 文章标签： jQuery CSS Chrome Firefox .net ViewUI
目前做的项目需要在页面里面用右键菜单，在网上找到两种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);
shadowlin
关注
专栏目录
jQuery右键菜单contextMenu使用实例
10-28
在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。
jquery.contextMenu
10-24
jquery.contextMenu V1.6.5
JS组件Bootstrap ContextMenu右键菜单使用方法
Alfred的博客
11-15 4985
这篇文章主要为大家详细介绍了JS组件Bootstrap ContextMenu右键菜单使用方法，感兴趣的小伙伴们可以参考一下 今天来总结下bootstrap的一个小组件的应用。好了，不说废话，进入正题吧。 一、ContextMenu介绍 一个需求：表格行调序，支持多选调序，并且可以不连续多选。什么意思呢？先来看看需要实现的效果图： 需求是：需要将选中
contextMenu.js 使用教程
gitblog_00537的博客
08-13 381
contextMenu.js 使用教程 contextMenu.jscontextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.项目地址:https://gitcode...
JQuery Context menu plugin
zjnbshifox
10-17 138
下载地址： http://www.trendskitchens.co.nz/jquery/contextmenu/ 1）现在页面上用html组成菜单 [code="html"] 分配 取消 分配2 [/code] 2）在页面上引用jQuery和contextmenu插件文件 [code="htm...
Android菜单详解（四）——使用上下文菜单ContextMenu
weixin_30752699的博客
08-27 606
之前在《Android菜单详解（二）——创建并响应选项菜单》和《Android菜单详解（三）——SubMenu和IconMenu》中详细讲解了选项菜单，子菜单和图标菜单。今天接着细说另一种被广泛使用的菜单——上下文菜单Context Menu。 ContextMenu简介 在Windows中，我们已经习惯了在文件上单击右键来执行“打开”、“重名名”、“剪切”、“删除”等操作，这个右键弹出的菜单...
jQuery contextMenu使用
dkvzkrdok146612647的博客
05-23 253
地址：jQuery contextMenu 需要以下文件： jquery.contextMenu.css jquery.min.css jquery.contextMenu.js jquery.ui.position.js PS：第一次使用的时，是给spread.sheet添加右键菜单，页面被多个spread充满，因为没有添加jquery.contextMenu.cs...
contextMenu.js 教程
最新发布
gitblog_00869的博客
08-13 279
contextMenu.js 教程 contextMenu.jscontextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.项目地址:https://gitcode.c...
JQuery右键菜单插件ContextMenu使用指南
10-25
jQuery右键菜单插件ContextMenu是一款用于在网页上创建自定义右键菜单的工具，它使得开发者能够轻松地为HTML元素添加上下文敏感的菜单选项。这个插件提供了高度的定制性，允许你根据需求调整菜单的样式和功能。 ...
jquery-contextMenu右键（左键）菜单插件
12-26
`jQuery-contextMenu`是一款强大的JavaScript插件，专为创建功能丰富的上下文菜单而设计，能够处理大量的元素。这款插件不仅支持传统的右键点击触发，还可以根据需求设置为左键点击显示菜单，极大地提升了用户的交互...
推荐开源项目：contextMenu.js —— 灵活的右键菜单插件
gitblog_00040的博客
05-31 501
推荐开源项目：contextMenu.js —— 灵活的右键菜单插件 contextMenu.jscontextMenu.js is a plugin to create windows like context menu with keyboard interaction, different type of inputs ,trigger events and much more.项目地址:...
jsContextMenu:jsContextMenu 可以通过简单的方式创建一个无限级别的菜单
06-22
jsContextMenu jsContextMenu可以生成并替换右键菜单，支持无限子菜单，可挂载于不同的Layer。 Demo & Configuration Screenshots
一个通用js右键菜单控件JavaScript Context Menu Control
09-12
通用js右键菜单控件，可以与任意的服务器端控件或者客户端控件结合使用，功能强大，使用方便！
contextmenu:完美像素的OS风格javascript上下文菜单
05-10
Contextmenu是一个javascript库（无依赖项），可用于在网页中创建具有本机外观的右键单击菜单。 不要用它来替换默认的上下文菜单（例如，防止将链接的文件下载为...，将图像另存为..），因为这很烦人。 预期用途确实适用于大量使用javascript的网络应用。 屏幕截图 Mac OS X Lion风格 Windows Vista风格 Windows 7风格 Ubuntu风格 后备风格 用法 要求： contextmenu.js 上下文菜单 可以使用HTML上下文菜单表示法来指定标记，也可以使用contextmenu对象提供的简单Javascript API构建DOM节点，并添加一些JavaScript以确保浏览器的兼容性。 API范例 var menu = contextmenu([ { label: "First Item", onclick: functi
JQUERY_contextMenu_学习
iteye_3366的博客
11-08 234
[menuContext首页:http://www.trendskitchens.co.nz/jquery/contextmenu/] contextMenu的js文件学习: /* *!!!!!![$(x).contextMenu(id,options)---便于称呼先暂时称:对元素x的一次绑定(x可能是一个元素集合)] * 元素x称为绑定元素 *给元素添加右...
JS: 自定义右键操作列表 Context Menu
超悠閒的博客
03-03 2765
JS: 自定义右键操作列表 Context Menu 文章目录JS: 自定义右键操作列表 Context Menu默认 Context Menucontextmenu 事件完整代码示例参考连接 默认 Context Menu 使用页面的时候，使用右键点击页面会弹出类似下面的可选操作列表，这个列表在浏览器中称为 Context Menu 实际上我们也可以像下面这样自定义自己的 Context Menu 上图应用：drawio contextmenu 事件 而我们要自己掌控这个右键点击事件有两种方式
vue 右键使用 组件vue-contextmenujs
艾米的猫儿的博客
03-23 807
vue 右键使用 vue-contextmenujs 组件内使用
contextmenu.js右键菜单网页插件
ICode联盟
02-08 299
contextmenu.js是一个小的、动态的、多层次的右键菜单用纯JavaScript编写的。能够从一个数组创建一个右键单击上下文菜单的菜单对象,支持淡入/淡出动画,自定义图标,禁用菜单项和无限数量的菜单的水平。
jQuery实现右键菜单与遮罩效果
"jQuery 实现右键菜单、遮罩及弹出层效果的代码示例" 在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画制作以及Ajax交互等多个方面的工作。在这个示例中，我们将探讨如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值