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

第一步 引入文件

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

 

 

js部分：

$.contextMenu({
    selector: '.list-item',
    items: {
        "view": {
            name: "浏览", 
            icon:"view"
        },
        "rename": {
            name: "重命名",
            icon: "rename"
        },
        "colla": {
            name: "协作", 
            icon: "colla"
        },
        "pubpo": {
            name: "发布和公开",
            icon: "pubpo"
        },
        "share": {
            name: "分享",
            icon: "share"
        },
        "clone": {
            name: "克隆",
            icon: "clone"
        },
        "download": {
            name: "下载",
            icon: "download"
        },
        "copy": {
            name: "复制或移动",
            icon: "copy"
        },
        "delete": {
            name: "删除",
            icon: "delete"
        }

    }
});

第二步 自定义图标

font文件夹是框架自带的图标，用FontLab打开里边后缀为.eot的文件看到里边的图标是这样的，图标只有这几个肯定不够用，就要自己自定义了。

在阿里图标库找些自己要用的图标，我是用ps把图标全调成16px的，然后在jquery.contextMenu.css里先把原来的图标代码删了，防止有重复的，然后再把自己的图标定义一下。

.context-menu-icon-view {
  background: url(listIcon/view.png) no-repeat;
  background-position: 10% 50%;
}

.context-menu-icon-rename {
  background: url(listIcon/rename.png) no-repeat;
  background-position: 10% 50%;
}

.context-menu-icon-colla {
  background: url(listIcon/colla.png) no-repeat;
  background-position: 10% 50%;
}

差不多就这样了，很简单，不想用ps调图标大小的就自己在css里写个background-size吧

成果图：