JQuery右键菜单插件ContextMenu使用指南
jquery右键菜单插件contextmenu使用指南。插件下载地址:
https://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
压缩版:
https://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
jquery主页: https://jquery.com/
通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式.
代码如下:
<html>
<head>
<title> jquery右键菜单 </title>
<script src="jquery-1.2.6.min.js"></script>
<script src="jquery.contextmenu.r2.js"></script>
</head>
<body>
<span class="demo1" style="color:green;">
右键点此
</span>
<hr />
<p id="demo2">
右键点此
</p>
<hr />
<p class="demo3" id="dontshow">
不显示
</p>
<hr />
<p class="demo3" id="showone">
显示第一项
</p>
<hr />
<p class="demo3" id="showall">
显示全部
</p>
<hr />
<!--右键菜单的源-->
<p class="contextmenu" id="mymenu1">
<ul>
<li id="open"><img src="folder.png" /> 打开</li>
<li id="email"><img src="email.png" /> 邮件</li>
<li id="save"><img src="disk.png" /> 保存</li>
<li id="delete"><img src="cross.png" /> 关闭</li>
</ul>
</p>
<p class="contextmenu" id="mymenu2">
<ul>
<li id="item_1">选项一</li>
<li id="item_2">选项二</li>
<li id="item_3">选项三</li>
<li id="item_4">选项四</li>
</ul>
</p>
<p class="contextmenu" id="mymenu3">
<ul>
<li id="item_1">csdn</li>
<li id="item_2">javaeye</li>
<li id="item_3">itpub</li>
</ul>
</p>
</body>
<script>
//所有class为demo1的span标签都会绑定此右键菜单
$('span.demo1').contextmenu('mymenu1',
{
bindings:
{
'open': function(t) {
alert('trigger was '+t.id+'\naction was open');
},
'email': function(t) {
alert('trigger was '+t.id+'\naction was email');
},
'save': function(t) {
alert('trigger was '+t.id+'\naction was save');
},
'delete': function(t) {
alert('trigger was '+t.id+'\naction was delete');
}
}
});
//所有html元素id为demo2的绑定此右键菜单
$('#demo2').contextmenu('mymenu2', {
//菜单样式
menustyle: {
border: '2px solid #000'
},
//菜单项样式
itemstyle: {
fontfamily : 'verdana',
backgroundcolor : 'green',
color: 'white',
border: 'none',
padding: '1px'
},
//菜单项鼠标放在上面样式
itemhoverstyle: {
color: 'blue',
backgroundcolor: 'red',
border: 'none'
},
//事件
bindings:
{
'item_1': function(t) {
alert('trigger was '+t.id+'\naction was item_1');
},
'item_2': function(t) {
alert('trigger was '+t.id+'\naction was item_2');
},
'item_3': function(t) {
alert('trigger was '+t.id+'\naction was item_3');
},
'item_4': function(t) {
alert('trigger was '+t.id+'\naction was item_4');
}
}
});
//所有p标签class为demo3的绑定此右键菜单
$('p.demo3').contextmenu('mymenu3', {
//重写oncontextmenu和onshowmenu事件
oncontextmenu: function(e) {
if ($(e.target).attr('id') == 'dontshow') return false;
else return true;
},
onshowmenu: function(e, menu) {
if ($(e.target).attr('id') == 'showone') {
$('#item_2, #item_3', menu).remove();
}
return menu;
}
});
</script>
</html>
效果图:
很好玩很炫酷的功能吧，小伙伴们自己美化下，加入到自己的项目中去吧