Jquery鼠标右键插件contextMenu使用方法及自定义图标

最新推荐文章于 2021-02-05 08:42:03 发布

肆爪

最新推荐文章于 2021-02-05 08:42:03 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/du_5pet/article/details/107781455

版权

本文介绍了如何使用jQuery的contextMenu插件，并详细讲解了如何自定义图标。首先，从GitHub下载并引入相关文件，忽略position.js。接着，通过阿里图标库选取并调整图标大小至16px，替换掉原有框架的图标，最终实现自定义图标的contextMenu效果。

摘要由CSDN通过智能技术生成

第一步引入文件

文件在github上下载的，都可以搜到。我是把整个dist文件夹里的全放进项目里了，把这俩文件引进去。position.js文件我没有引，暂时不知道这文件干啥用的

js部分：

$.contextMenu({
    selector: '.list-item',
    items: {
        "view": {
            name: "浏览", 
            icon:"view",
            callback: function (key, options) {
                    //事件处理在这里
             }
        },
        "rename": {
            name: "重命名",
            icon: "rename"
        },
        "colla": {
            name: "协作", 
            icon: "colla"
        },
        "pubpo": {
            name: "发布和公开",
            icon: "pubpo"
        },
        "share": {