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

SATA
JavaScript HTML/CSS
跨平台
2017-08-03
尤里2号

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 修复了二级菜单溢出屏幕的问题,更好的兼容性

 

加载中

评论(5)

尤里2号
尤里2号 软件作者
@saraphines123 对于VUE,支持
的写法来传入事件
s
saraphines123
能否有个vue的版本?
l
lblin
轮子太多了
宇润
宇润
好,建议增加多种风格皮肤选择
l
l_xq
mark

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

contextMenu 是一个自由定制页面元素的右键菜单。通过指定的参数,渲染出一个漂亮的右键菜单,并绑定菜单项点击事件。 特色 侵入性小,这个插件几乎不会影响全局,除了 ContextMenu 全局变量...

02/01 08:47

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

jQuery右键菜单插件ContextMenu

ContextMenu插件下载地址 http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 弄个DEMO玩玩吧! <script src='jquery.js'></script> <script src='jque...

2011/10/02 13:45
989
0
右键菜单

仿Win7右键菜单(原生JS) http://bbs.blueidea.com/thread-3028593-1-1.html jQuery ContextMenu Plugin(GOOD) http://www.javascripttoolbox.com/lib/contextmenu/index.php 自定义菜单:...

2012/06/06 10:51
212
2
Android_文档学习_UI_creating menus

Creating Menus android 菜单包括三种.Options Menu , Context Menu 和Submenu. 本文完整代码 CSDN下载频道 :http://download.csdn.net/source/2900952 , 1.Options Menu(选项菜单) @方法1 需...

2013/06/04 22:20
20
0
Detecting event support without browser sniffing

Detecting event support without browser sniffing 原文:http://thinkweb2.com/projects/prototype/detecting-event-support-without-browser-sniffing/ one of the pain points of featu...

2013/05/11 15:13
11
0
在QT中添加右键菜单

QWidget及其子类都可有右键菜单,因为QWidget有以下两个与右键菜单有关的函数: Qt::ContextMenuPolicy contextMenuPolicy () const void setContextMenuPolicy ( Qt::ContextMenuPolicy pol...

2012/07/05 10:55
219
0
上下文菜单

上下文菜单和开发选项菜单的区别在于: 个人认为上下文菜单是长按组件时候出现的菜单,选项菜单是按手机上的menu键出现的菜单 开发上下文菜单不是重写onCreateOptionMenu(Menu menu)方法,而...

2014/03/11 14:56
66
0
Jquery contentMenu右键菜单 当某个事件出发时才显示菜单

jquery 右键菜单,等待事件触发才显示

2015/10/28 11:00
905
0
ListView中单击其中一项创建ContextMenu,如何获取该localBookList...

如果是在ListView进行创建的上下文菜单,那么如何获取ListView所单击列项的数据呢? 有两种方式可获取: 1、 可以通过在长时间点击OnLongItemClick方法事件,将所单击的View数据进行临时保存...

2012/08/28 13:26
1K
0
win32学习10.菜单

菜单的分类 窗口顶层菜单,弹出式菜单,系统菜单。句柄类型为HMENU,根据这三类还会细分,但是代码里是一样的。 窗口顶层菜单 HMENU hMain = CreateMenu();//创建菜单,成功则返回句柄 HME...

2017/10/31 09:35
2
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部