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

何和惬
2023-12-01

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
 类似资料: