jQuery contextMenu自定义上下文插件插件简单使用

jQuery contextMenu自定义上下文插件插件

最近有需求需要禁用浏览器默认的右键，自定义新的功能，用到了 jQuery contextMenu这个插件，这个插件主要是用于创建右键弹出菜单的jQuery插件

官网地址
github地址

• 第一步：下载包
  源码是放在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