jQuery-右键菜单插件contextMenu使⽤详解1（安装配置、基本
⽤法）
⼀、基本介绍
1，插件说明
（1）contextMenu 是⼀个专门⽤于 Web 应⽤的右键菜单插件。
（2）与⼀般的菜单插件不同，contextMenu 不需要将其⾃⾝绑定到触发对象上。这就使得我们可以随时注⼊和删除触发器，⽽不必重新初始化或更新 contextMenu。
（3）contextMenu 可以根据需要创建菜单，即根据触发元素的不同⽽不同。同时还⽀持动态创建上下⽂菜单。
GitHub 主页：
2，功能特点
多种上下⽂菜单触发⽅式：右键单击、左键单击、⿏标悬停、⾃定义触发事件
在触发对象添加或移除的时候，委托处理事件不需要重新初始化
按需动态创建菜单
⽀持命令图标（可选）
⽀持多种菜单输⼊元素：text, textarea, checkbox, radio, select
⽀持⾃定义 html 元素
⽀持显⽰/隐藏回调来更新命令的状态
即使有数百个触发对象也只占⽤很⼩的内存
⾃动调整菜单的位置以适应窗⼝
⽀持启⽤/禁⽤命令
⽀持嵌套⼦菜单
⽀持全键盘互动
⽀持 HTML5<menu>
⽀持通过 CSS 设置样式
3，安装配置
使⽤ contextMenu 要引⼊ tMenu.js 和 tMenu.css
同时由于 contextMenu 依赖 jQuery（必须）和 jQuery UI position（⾮必须，但还是推荐使⽤），还必须将这两个引⼊进来。
1 2 3 4<script src="jquery-3.1.1.js"charset="utf-8"></script>
<script src="contextMenu/jquery.ui.position.min.js"type="text/javascript"></script> <script src="tMenu.js"type="text/javascript"></script>
<link href="tMenu.css"rel="stylesheet"type="text/css"/>
⼆，基本⽤法
1，在单⼀的元素上添加菜单
（1）效果图
我们在“按钮1”上绑定⼀个菜单，右键点击即可弹出菜单。
点击菜单项后菜单消失，同时在控制台中输出对应菜单项的命令。
（2）样例代码
大舌头的歌词注意：
本样例中右键菜单的触发元素是 button 按钮，它在页⾯初始化时就已经在那⾥了。
但即使我们右键菜单先初始化，后⾯再在页⾯上动态创建对应的触发元素也是没有问题的。1
2
3 4 5 6<!DOCTYPE html>网约车双证
<html>
<head>
<meta charset="utf-8">
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"charset="utf-8"></script>
<script src="contextMenu/jquery.ui.position.min.js"type="text/javascript"></script> <script src="tMenu.js"type="text/javascript"></script>
<link href="tMenu.css"rel="stylesheet"type="text/css"/> </head>
<body>
<button class="context-menu-one">按钮1</button>
红酒知识大全<script type="text/javascript">
$(function() {
//初始化菜单特主题餐厅
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了："+ key);
},
items: {
"edit": {name: "编辑", icon: "edit"},
"cut": {name: "剪切", icon: "cut"},
"copy": {name: "复制", icon: "copy"},
"paste": {name: "粘贴", icon: "paste"},
"delete": {name: "删除", icon: "delete"},
"sep1": "---------",
"quit": {name: "退出", icon: function(){
return'context-menu-icon context-menu-icon-quit';
}}
}
});
});
</script>
</body>
</html>
2，在多个元素上添加菜单
（1）效果图
这个样例同上⾯的区别是让页⾯上所有的 li 元素都使⽤同⼀个菜单，即右键点击任意⼀个 li 元素都会显⽰菜单。同时点击菜单项后，控制台中除了会输出菜单命令，还会输出对应的 li 元素的⽂本信息。
（2）样例代码
1
2
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28<ul>
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: 'li',
callback: function(key, options) {
console.log("点击了："+ key);
console.log("来源："+ $(this).text());
},
items: {
"edit": {name: "编辑", icon: "edit"},
"cut": {name: "剪切", icon: "cut"},
"copy": {name: "复制", icon: "copy"},
"paste": {name: "粘贴", icon: "paste"},
"delete": {name: "删除", icon: "delete"},
"sep1": "---------",
"quit": {name: "退出", icon: function(){
return'context-menu-icon context-menu-icon-quit'; }}
}
});
});
</script>
28
29
30
三、⼦菜单
items 节点⾥还可以嵌套配置，contextMenu 便会⾃动⽣成相应的⼦菜单。1，效果图
下⾯我们创建⼀个拥有三级⼦菜单的菜单。
2，样例代码
1
2
3
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33<button class="context-menu-one">按钮1</button> <script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了："+ key);
},
items: {
"edit": {name: "编辑", icon: "edit"},
"cut": {name: "剪切", icon: "cut"},
"sep1": "---------",
"fold1": {
name: "布局",
items: {
"fold1-key1": {name: "相对定位"},
"fold1-key2": {name: "绝对定位定位"}, "fold2": {
name: "对齐",
items: {
"fold2-key1": {name: "左对齐"}, "fold2-key2": {name: "右对齐"}, "fold2-key3": {name: "居中显⽰"} }
},
}
},
}
});
});
</script>
四、给菜单项单独配置回调⽅法
我们知道所有的菜单项点击后都会触发配置的 callback ⽅法。其实每个菜单项也可以配置⾃⼰的 callback ⽅法。当然这个菜单项如果⼀旦有⾃定的 callback ⽅法，点击后是不会再调⽤外⾯那个 callback ⽅法了。
1，效果图
我们给“编辑”项添加了个单独的 callback ⽅法，可以发现点击后触发的⽅法和其它两个菜单项不⼀样。
2，样例代码
刘涛的照片1
2
3
4
<button class="context-menu-one">按钮1</button>
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<script type="text/javascript">
$(function() {
//初始化菜单
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
console.log("点击了："+ key);
},
items: {
"edit": {
name: "编辑",
icon: "edit",
callback: function(itemKey, opt, rootMenu, originalEvent) { console.log("“编辑”菜单项被点击了");聘任合同
}
},
"cut": {name: "剪切", icon: "cut"},
"copy": {name: "复制", icon: "copy"},
}
});
});
</script>
原⽂出⾃：转载请保留原⽂链接：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论