这篇文章主要介绍了JQuery右键菜单插件上下文菜单使用指南，需要的朋友可以参考下
插件下载地址：
http://www。trendskitchens。co . NZ/jquery/上下文菜单/jquery。上下文菜单。R2。射流研究…
压缩版：
http://www。trendskitchens。co . NZ/jquery/上下文菜单/jquery。上下文菜单。R2。打包好了。射流研究…
Jquery主页：http://jquery.com/
通过此插件可以在不同的超文本标记语言元素内建立上下文菜单，并且可以自定义样式。
复制代码代码如下：
超文本标记语言
头
标题JQuery右键菜单/标题
脚本src=' jquery-1。2 .6 .量滴js '/脚本
脚本src=' jquery。上下文菜单。R2。js '/脚本
/头
身体
span class=' demo 1 ' style=' color:green；
右键点此
/span
人力资源/
div id='demo2 '
右键点此
/div
人力资源/
div class='demo3' id='dontShow '
不显示
/div
人力资源/
div class='demo3' id='showOne '
显示第一项
/div
人力资源/
div class='demo3' id='showAll '
显示全部
/div
人力资源/
！-右键菜单的源-
div class='上下文菜单' id='我的菜单1 '
保险商实验所
Li id='打开' img src='文件夹。巴布亚新几内亚'/打开/李
Li id=' email ' img src=' email。巴布亚新几内亚'/邮件/李
li id='save'img src='disk.png' /保存/李
Li id=' delete ' img src=' cross。巴布亚新几内亚'/关闭/李
/ul
/div
div class='上下文菜单' id='我的菜单2 '
保险商实验所
li id='item_1 '选项一/李
li id='item_2 '选项二/李
li id='item_3 '选项三/李
li id='item_4 '选项四/李
/ul
/div
div class='上下文菜单' id='我的菜单3 '
保险商实验所
li id='item_1'csdn/li
li id='item_2'javaeye/li
li id='item_3'itpub/li
/ul
/div
/BODY
脚本
//所有班级为演示一的跨度标签都会绑定此右键菜单
$('span.demo1 ').上下文菜单(' myMenu1 '，
{
绑定：
{
'打开：函数(t) {
警报('触发器为t.id ' \操作已打开');
},
'电子邮件：功能(t) {
警报(“触发器为t . id'\ n操作为电子邮件");
},
'保存：函数(t) {
警报('触发器为t.id ' \操作已保存');
},
'删除：函数(t) {
警报('触发器为t.id ' \操作为删除’)；
}
}
});
//所有超文本标记语言元素身份证明(识别)为演示2的绑定此右键菜单
$('#demo2 ').上下文菜单(' myMenu2 '，{
//菜单样式
menuStyle: {
边框：“2px纯色#000"
},
//菜单项样式
项目样式：{
字体家族：“verdana”，
背景色：'绿色，
颜色：'白色，
边框："无",
填充：" 1px "
},
//菜单项鼠标放在上面样式
itemHoverStyle: {
颜色：'蓝色，
背景颜色：'红色，
边框："无"
},
//事件
绑定：
{
' item_1 ':函数(t) {
警报('触发器为t.id ' \操作为item _ 1’)；
},
' item_2 ':函数(t) {
警报('触发器为t.id ' \操作为item _ 2’)；
},
' item_3 ':函数(t) {
警报('触发器为t.id ' \操作为item _ 3’)；
},
' item_4 ':函数(t) {
警报('触发器为t.id ' \操作为item _ 4’)；
}
}
});
//所有差异标签班级为演示3的绑定此右键菜单
$('div.demo3 ').上下文菜单(' myMenu3 '，{
//重写onContextMenu和展示菜单事件
onContextMenu:函数(e) {
if ($(e.target).attr('id')=='dontShow ')返回错误的
否则返回真实的
},
onShowMenu: function(e，menu) {
if ($(e.target).attr('id')=='showOne') {
$('#item_2，#item_3 '，菜单)。移除();
}
返回菜单；
}
});
/脚本
/HTML
效果图：
很好玩很炫酷的功能吧，小伙伴们自己美化下，加入到自己的项目中去吧
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。