jQuery自定义鼠标右键菜单

查看演示立即下载

插件描述：jQuery自定义鼠标右键菜单插件jquery.contextMenu.js

更新时间：2017/9/19 下午9:53:21

更新说明：修复引入jQuery 3.x版本，插件报错问题

使用方法

1.引入样式和脚本

<link rel="stylesheet" href="css/jquery.contextMenu.css" />
<script src="/"></script>
<script src="js/jquery.contextMenu.min.js"></script>

2.实例化插件

$("#box2").contextMenu({
    width: 110, // width
    itemHeight: 30, // 菜单项height
    bgColor: "#333", // 背景颜色
    color: "#fff", // 字体颜色
    fontSize: 12, // 字体大小
    hoverColor: "#fff", // hover字体颜色
    hoverBgColor: "#99CC66", // hover背景颜色
    target: function(ele) { // 当前元素--jq对象
        console.log(ele);
    },
    menu: [{ // 菜单项
            text: "新增",
            icon: "img/1.png",
            callback: function() {
                alert("新增");
            }
        },
        {
            text: "复制",
            icon: "img/2.png",
            callback: function() {
                alert("复制");
            }
        },
        {
            text: "粘贴",
            icon: "img/3.png",
            callback: function() {
                alert("粘贴");
            }
        },
        {
            text: "删除",
            icon: "img/4.png",
            callback: function() {
                alert("删除");
            }
        }
    ]
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： Bootstrap提取modal，原汁原味
下一个特效：一个简单的jQuery日历插件Calendar.js