jQuery自定义鼠标右键菜单

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

 24155  195  查看评论 (30)
分享到微信朋友圈
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("删除");
            }
        }
    ]
});
相关插件-独立的部件

CSS3开关切换按钮

多组超具创意的CSS3开关切换按钮
  独立的部件
 19815  253

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 34075  219

可停靠屏幕边缘的侧边栏插件

我自己封装的可停靠屏幕边缘的侧边栏插件,可以制作页面的通知信息,客服信息,联系方式等
  独立的部件
 21934  253

jQuery表格 可选择导出各种格式

表格内容详情可选择导出各种格式(Excel(xls)、PDF、PNG)
  独立的部件
 36418  319

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

    欲落雨 1
    2019/8/15 15:58:54

    阻止重叠父图层冒泡:

    eventBind: function() {
            var t = this;
            this.ele.on("contextmenu", function(n) {
                n.preventDefault(),
                    n.stopPropagation(), ........ //添加此行
            }),
    回复
    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
    动态生成的 无法添加上事件 怎么用事件委托啊 回复
    IPromise 0
    2018/3/28 11:36:41
    二级菜单怎么弄,可以给思路吗 回复
    莫沫 0
    2018/1/15 17:00:03

    “hoverColor: "#fff", // hover字体颜色”这一点设置了没有任何效果,是什么原因?

    回复
    齿轮 0
    2017/11/11 15:26:57

    楼主,怎么在右键菜单开始前,判断某些东西,如果为什么什么,就让某些菜单选项隐藏或点不了?

    回复
取消回复