jQuery contextMenu自定义上下文插件插件
最近有需求需要禁用浏览器默认的右键,自定义新的功能,用到了 jQuery contextMenu这个插件,这个插件主要是用于创建右键弹出菜单的jQuery插件
- 第一步:下载包
源码是放在github上的,我是通过git下载的
git clone https://github.com/swisnl/jQuery-contextMenu.git
- 第二步:在html中一个引入包。
- jquery 因为是基于jquery>=1.8.2的
- jquery.contextMenu.min.js
- jquery.ui.position.min.js ui-position推荐引入,但我现在还没用到
<link rel="stylesheet" href="font-awesome.min.css">
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="jquery.ui.position.min.js"></script>
- html部分
<span class="context-menu-one btn btn-default">right click me</span>
- javascript部分
jQuery(document).ready(function($) {
// 禁用原生右键功能
$(document).bind("contextmenu",function(e){
return false;
})
// 自定义右键
$('#the-node').contextMenu({
//选择器 定义哪些元素触发此菜单
selector: 'li',
callback: function(key, options) {
var m = "clicked: " + key + " on " + $(this).text();
window.console && console.log(m) || alert(m);
},
//定义菜单 名称和图标
items: {
// 引用了font-awesome图标
"edit": {name: "编辑", icon: "fa-edit fa"},
"cut": {name: "剪切", icon: "cut",},
"copy": {name: "复制", icon: "copy"},
"paste": {name: "粘贴", icon: "paste"},
"delete": {name: "删除", icon: "delete"},
"sep1": "---------",
"quit": {name: "退出", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
}
});
});
- 总结
- contextMenu中对font-awesome图标有很好的支持,当然也有自带的图标
- 注意:自带的图标需要将下载的font字体也一起放入项目目录中,不然图标的效果出不来还会报错! 不想说话…
- contextMenu简单整理下用法,之后再补充。
- 效果jquery-contextMenu-Dome