Jquery ContextMenu插件改造

最近需要在页面的表格上使用的右键弹出菜单,考察了下网络上的几个右键菜单发现都不太符合:需要能够用列表来布局菜单,而不是都放在javascript中控制。Jqueryui 的menu插件采用ul和li来布局,但是菜单项仅仅是个超级链接,不能结合当前被右键单击的元素进行动态传递参数和禁用/启用菜单。于是网上找了个插件自己来改造。

首先增加了几个参数:currentTarget用于保存当前的右键单击事件的对象;actions用于根据菜单id来进行函数绑定;selector用于保存当前应用右键菜单的选择器;options对象用于保存一些其他的扩展参数,比如hover为鼠标滑过菜单的css样式,highlight为当前右键单击元素的css样式。actions对象可以包括多个子对象,每一个子对象可以包含两个函数click和disabled,前者响应用户单击菜单事件,后者则指示是否在当前右键对象上禁用相关菜单。两个函数都将传入两个参数:source和li,source为右键单击的(jquery)对象,li则是当前单击的菜单(jquery)对象。用法示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
	<head>
	<link rel="stylesheet" type="text/css" href="jqcontextmenu.css" />
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jqcontextmenu.js"></script>
	<style>
		.myhighlight{
			background-color:#DEDEDE;
		}
		.myjqhover{
			background-color:#DEDEDE;
		}
	</style>

	<script type="text/javascript">

	//Usage: $(elementselector).addcontextmenu('selector',actions,options)

	jQuery(document).ready(function($){
		$('p').addcontextmenu('contextmenu1',{
			'item1':{//对应菜单的ID
				click:function(source,li){//需要进行单击菜单响应的
					//alert(source);
					alert(source.attr('id'));
				}
			},
			'item2':{
				click:function(source,li){
					alert(source.attr('id')+":"+li.attr('id'));
				},
				disabled:function(source,li){//需要进行启用/禁用控制的
					if(source.attr('id')=='dp'){
						return true;//禁用
					}
					return false;//启用
				}
			},
			'item31':{
				click:function(source,li){
					alert(li.attr('id'));
				}
			},
			'item521':{
				click:function(source,li){
					alert(li.attr('id'));
					//alert(li.attr('id'));
				}
			}
		},{highlight:'myhighlight',hover:'myjqhover'}); //apply context menu to links with class="mylinks"
	});


	</script>
	</head>
	<body>
		<p id="dp"><a class="mylinks" href="#1" id="dynamic">Dynamic Drive</a></p>
		<p id="dp2"><a class="mylinks" href="#2" id="dynamic2">Dynamic Drive2</a></p>
		<div id="div" style="float:right">dadfasd</div>
		<!--HTML for Context Menu 1-->
		<ul id="contextmenu1" class="jqcontextmenu">
		<li id="item1"><div>Item 1a</div></li>
		<li class="sep"></li>
		<li id="item2"><div>Item 2a</div></li>
		<li id="item3"><div>Item Folder 3a</div>
			<ul>
			<li id="item31"><div>Sub Item 3.1a</div></li>
			<li id="item3.2"><div>Sub Item 3.2a</div></li>
			<li id="item3.3"><div>Sub Item 3.3a</div></li>
			<li id="item3.4"><div>Sub Item 3.4a</div></li>
			</ul>
		</li>
		<li id="item4"><div>Item 4a</div></li>
		<li id="item5"><div>Item Folder 5a</div>
			<ul>
			<li id="item5.1"><div>Sub Item 5.1a</div></li>
			<li id="item5.2"><div>Item Folder 5.2a</div>
				<ul>
				<li id="item521"><div>Sub Item 5.2.1a</div></li>
				<li id="item5.2.2"><div>Sub Item 5.2.2a</div></li>
				<li id="item5.2.3"><div>Sub Item 5.2.3a</div></li>
				<li id="item5.2.4"><div>Sub Item 5.2.4a</div></li>
				</ul>
			</li>
			</ul>
		</li>
		<li id="item6"><div>Item 6a</div></li>
		</ul>
	</body>
</html>

这个插件是在jquery 1.7以上版本进行修改和测试,jqcontextmenu项目osc地址

参考链接:
jQuery Context Menu script
Bunch Of Widely Used jQuery Context Menus
arnklint/jquery-contextMenu
medialize/jQuery-contextMenu
wdContextMenu Samples vs Code
jQuery右键菜单插件ContextMenu使用笔记
jQuery右键菜单插件ContextMenu

Jquery ContextMenu插件改造》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注