Web contextMenu 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Web contextMenu 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Web contextMenu 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 SATA
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 尤里2号
适用人群 未知
收录时间 2017-08-03

软件简介

contextMenu

自由定制页面元素的右键菜单。

最新版本

v2.2.0

原理

该插件通过指定的参数,渲染出一个漂亮的右键菜单,并绑定菜单项点击事件。

需要的参数有:

  1. 右键事件e。指定一个事件e,它可能是通过原生js、jq,甚至vue捕捉的;该插件将获取点击的位置,并阻止事件冒泡,屏蔽默认的右键菜单。
  2. 菜单描述数组menu。menu数组决定了你想渲染出什么样的菜单。

特色

  • 侵入性小,这个插件几乎不会影响全局,除了ContextMenu全局变量。
  • 兼容性好,在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。
  • 支持多层嵌套的DOM触发的事件,以最里层为准(详见demo)。
  • 支持二级菜单。

准备

  1. 下载源码(并点赞)
  2. 引入 jquery
  3. 引入 contextMenu.css
  4. 引入 contextMenu.js

典型用法

            $('body').contextmenu(function (e) {
                var menu=[
                    'menu1', //合理的html或纯文字
                    'menu2',
                    '|', //分隔符
                    [
                        'click me', //title
                        function (dom) {alert('Hi')} // 点击菜单项的回调
                    ],
                ];
                ContextMenu.render(e,menu,this); //开始渲染
            });

API

ContextMenu.render(e,menu,param,theme)

e:点击事件对象,如$('body').contextmenu(function (e){})

menu:

menu为false代表恢复为系统默认的菜单;

menu为true代表禁用系统默认菜单,但是不渲染自定义菜单;

menu为数组表示渲染自定义右键菜单;

var menu=[
    '文字1', //纯文字或html将直接被渲染,做为一个提示性菜单项
    '文字2',
    '|', //简单的一个分隔符
    ['功能1',function(param){alert("功能1点击")}], //这种格式说明这个菜单项可以被点击并产生回调
    [
        '子菜单',[
            '文字3',
            '文字4',
            '|',
            ['功能2',function(param){alert("功能2点击")}],
        ]
    ] //声明一个子菜单,子菜单内部的声明格式和父级一样
]

param:菜单点击回调的第一个参数

theme:主题(目前可选主题"light")

其他

注意:为了获得正确的屏幕尺寸,添加了一个html,body:{height:100%}的样式,请确保该样式生效不被覆盖。

更多项目

Yuri2'Projects

更新记录

  • v2.2.0 新增主题切换功能
  • v2.1.1 修复了二级菜单溢出屏幕的问题,更好的兼容性

 

展开阅读全文

代码

评论

点击加入讨论🔥(6)
发表于大前端专区
2018/02/01 08:47

Web contextMenu 右键菜单 2.1,支持二级菜单

contextMenu 是一个自由定制页面元素的右键菜单。通过指定的参数,渲染出一个漂亮的右键菜单,并绑定菜单项点击事件。 特色 侵入性小,这个插件几乎不会影响全局,除了 ContextMenu 全局变量。 兼容性好,在各个屏幕尺寸和有无滚动条的场景都有不错的渲染效果。 支持多层嵌套的 DOM 触发的事件,以最里层为准(详见 demo )。 支持二级菜单。 这个小插件现已升级到2.1,添加了对二级菜单的支持,本人已自用五个月没有啥bug,有兴...

3
35
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
6 评论
20 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部