jQuery自定义鼠标右键菜单

所属分类:其他-独立的部件

 37971  370  查看评论 (34)
分享到微信朋友圈
X
jQuery自定义鼠标右键菜单 ie兼容6

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

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


使用方法

1.引入样式和脚本

<link rel="stylesheet" href="css/jquery.contextMenu.css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></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("删除");
            }
        }
    ]
});
相关插件-独立的部件

新浪天气、时间获取插件

LeoWeather 是一款专门用来获取天气和时间的插件,本插件自创的标签模式使得用户可以更好的对显示内容进行排版!
  独立的部件
 56566  501

jquery生成二维码

jquery生成二维码
  独立的部件
 52802  457

jQuery漂亮的CSS3颜色渐变选择器

jQuery漂亮的CSS3颜色渐变选择器可直接生成各种CSS渐变代码,功能强大!
  独立的部件
 29250  324

jQueryShare分享插件支持微信分享

jQueryShare实现弹出层分享插件修改版,支持微信分享
  独立的部件
 60443  472

讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Q.Ni 0
    2021/12/8 9:00:28
    如何在右建菜单点击后取到点击元素。 并使用呢 回复
    Alvaro soler 0
    2021/8/16 3:42:48
    欲落雨 1
    2019/8/15 15:58:54

    阻止重叠父图层冒泡:

    eventBind: function() {
            var t = this;
            this.ele.on("contextmenu", function(n) {
                n.preventDefault(),
                    n.stopPropagation(), ........ //添加此行
            }),
        Alvaro soler0
        2021/8/16 3:43:23
        怎么给点的那一项传参数😀
    回复
    0
    2019/5/21 16:19:08
    怎么用左键哈。。
        ι 李阿呆 ??0
        2019/7/25 17:36:59
        customClick()
        function customClick() {
            $("#filesBox .item").contextMenu({ .....
            })
        }
    回复
    Mr先生 0
    2018/11/30 16:29:59
    能给个二级菜单的吗 回复
    The blind 0
    2018/10/26 18:49:33
    不能给动态生成的元素绑定啊
        摸金笑尉0
        2018/12/1 22:32:35
        你好,这个问题你解决了吗?就是给动态生成的元素引用右键菜单?

    回复
    LS.getName 0
    2018/10/2 23:28:55
    一个挺严重的bug就是如果页很长划到下面去点出来的菜单在上面。
        ?部1
        2019/1/14 16:14:11
        setPosition: function(t) {
        ...
        top: t.clientY + 2
        ...

        改为 top: t.clientY + $(window).scrollTop()+2

    回复
    华灯初上 1
    2018/9/22 16:19:23
    没有js文件。引用的CDN现在也404了,望核实。
        西瓜0
        2018/9/22 18:56:57
        感谢反馈,已经修复请重新下载。
    回复
    Mr先生 0
    2018/8/23 17:57:54
    动态生成的 无法添加上事件 怎么用事件委托啊
        Dodoing0
        2020/3/26 16:51:20
        我也遇到这个问题了,你解决了吗
    回复
    IPromise 0
    2018/3/28 11:36:41
    二级菜单怎么弄,可以给思路吗 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复