JQuery右键菜单插件ContextMenu使用指南
插件下载地址:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js
压缩版:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js
Jquery主页: http://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 />
<div id="demo2">
右键点此
</div>
<hr />
<div class="demo3" id="dontShow">
不显示
</div>
<hr />
<div class="demo3" id="showOne">
显示第一项
</div>
<hr />
<div class="demo3" id="showAll">
显示全部
</div>
<hr />
<!--右键菜单的源-->
<div 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>
</div>
<div 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>
</div>
<div class="contextMenu" id="myMenu3">
<ul>
<li id="item_1">csdn</li>
<li id="item_2">javaeye</li>
<li id="item_3">itpub</li>
</ul>
</div>
</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');
}
}
});
//所有div标签class为demo3的绑定此右键菜单
$('div.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>
效果图:
很好玩很炫酷的功能吧，小伙伴们自己美化下，加入到自己的项目中去吧
-
本文向大家介绍jquery插件ContextMenu设置右键菜单，包括了jquery插件ContextMenu设置右键菜单的使用技巧和注意事项，需要的朋友参考一下 Struts项目中右键菜单一般很少用到，但是一旦客户有要求，很多人就懵圈了，比如我。这个时候，当然要表现镇定，一面拍着胸口对客户承诺说绝对可以实现，一面赶紧打开百度神器，搜搜看是否有前人已经写好的插件。 于是便找到了jQuery的Con
-
本文向大家介绍jquery实现右键菜单插件，包括了jquery实现右键菜单插件的使用技巧和注意事项，需要的朋友参考一下 今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了，写出来的代码和效果如下： js部分： css部分代码如下： 创建调用代码如下： 销毁调用代码如下： 效果如下： 调用
-
本文向大家介绍jQuery菜单插件superfish使用指南，包括了jQuery菜单插件superfish使用指南的使用技巧和注意事项，需要的朋友参考一下 下载地址：http://plugins.jquery.com/project/Superfish 文档说明：http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started S
-
本文向大家介绍jQuery简单实现禁用右键菜单，包括了jQuery简单实现禁用右键菜单的使用技巧和注意事项，需要的朋友参考一下 代码非常简单，这里就不多废话了，直接上代码： 5行代码搞定，简单吧，当然小伙伴们可以自由扩展下，可以实现屏蔽右键菜单的指定项。
-
本文向大家介绍vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单，包括了vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单的使用技巧和注意事项，需要的朋友参考一下 今天分享的不是技术，今天给大家分享个插件，针对现有的vue右键菜单插件，大多数都是需要使用插件本身自定义的标签，很多地方不方便，可扩展性也很低，所以我决定写了一款自定义指令调用右键菜单（vuerightmenu） 安装
-
该插件可以右键单击节点，并在菜单中显示可配置操作的列表。 您可以在API中找到所有 contextmenu 插件配置选项。 $(function () { $("#plugins2").jstree({ "core" : { // so that create works "check_callback" : true },