最近需要在页面的表格上使用的右键弹出菜单，考察了下网络上的几个右键菜单发现都不太符合：需要能够用列表来布局菜单，而不是都放在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
好文拜读. courages.us 好样的.
开发人员要找开源软件及相关资料，介绍个好去处 http://www.boyunjian.com/?fm=9003