Web contextMenu 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Web contextMenu 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Web contextMenu 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Web contextMenu 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Web contextMenu 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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)

加载中
数组格式比自己写的div好用多了,star了
2020/07/19 17:34
回复
举报
尤里2号软件作者
打分: 力荐
@saraphines123 对于VUE,支持
的写法来传入事件
2018/02/02 17:21
回复
举报
能否有个vue的版本?
2018/02/01 14:30
回复
举报
轮子太多了
2018/02/01 13:59
回复
举报
好,建议增加多种风格皮肤选择
2018/02/01 13:59
回复
举报
mark
2018/02/01 13:52
回复
举报
更多评论
发表于大前端专区
2018/02/01 08:47

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

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

3
35
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2012/03/16 12:01

【Android】ExpandableListView的ContextMenu使用

在给ExpandableListView添加ContextMenu时,有时需要区分是group触发的长按还是child出发的长按,通过onCreateContextMenu的ContextMenuInfo参数可以具体判断出,具体代码: public void onCreateContextMenu(ContextMenu menu, View view, ContextMenuInfo menuInfo) { ExpandableListContextMenuInfo adapterContextMenuInfo = (ExpandableListContextMenuInfo) menuInfo; View t...

0
0
发表了博客
2018/01/10 17:51

v-contextmenu的使用(右键菜单)

先来个自己改写的图: 代码: 结构: <div class="wrap" v-contextmenu:contextmenu> <v-contextmenu ref="contextmenu"> <v-contextmenu-item ><i class="fa fa-search"></i>上插入</v-contextmenu-item> <v-contextmenu-item><i class="fa fa-search"></i>下插入</v-contextmenu-item> <v-contextmenu-item divider></v-contextmenu-item> <v-contextmenu-item><i class="fa fa-search"></i>左插入...

0
0
发表了博客
2014/08/25 11:30

点击Textview url弹出ContextMenu

代码:  private static final String SCHEME_TEL = "tel:";  private static final String SCHEME_HTTP = "http:";  private static final String SCHEME_EMAIL = "mailto:";  private static final Map<String, Integer> sSchemaActionResMap = new HashMap<String, Integer>();  static{    sSchemaActionResMap.put(SCHEME_TEL, R.string.note_link_tel);       sSchemaActionRe...

0
1
发表了博客
2018/11/11 18:51

Fragment 中 ListView绑定ContextMenu

package com.example.administrator.imbobo.controller.fragment; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; import android.support.v4.content.LocalBroadcastManager; import android.view.ContextMenu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import andro...

0
0
发表了博客
2020/04/17 09:48

WPF 菜单栏ContextMenu

效果: 前端写法: <Border >   <!--菜单栏-->   <Border.ContextMenu>     <ContextMenu>       <MenuItem Header="修改文字内容" Click="ModifyTextClick"></MenuItem>       <MenuItem Header="删除" Click="DeleteClick"></MenuItem>     </ContextMenu>   </Border.ContextMenu> </Border> 也可以在后端动态生成: //添加菜单栏 var menu = new MenuItem(); menu.Header = "menu1"; menu.Click += (s, e) => {   //do something }; //m...

0
0
2020/04/19 09:10

JavaFX系列之给对象添加ContextMenu菜单

在进行JavaFX进行桌面程序开发时,难免会遇到添加右键菜单的情况,今天就介绍一种通用的添加右键菜单的方式。 JavaFX中右键菜单均是通过ContextMenu来实现,首先定义GlobalMenu,继承ContextMenu,显示这些功能选项。代码日下所示: package org.crawler.ui.layout.left;import javafx.scene.control.ContextMenu;import javafx.scene.control.MenuItem;@SuppressWarnings("restriction")public class GlobalMenu extends Con...

0
0
发表了博客
2018/01/19 11:47

【WPF】右键菜单ContextMenu可点击区域太小的问题

问题描述 正常使用右键菜单ContextMenu时,如果菜单项是不变的,可以直接在XAML中写死,如下是给一个Button按钮添加了右键菜单功能。 <Button Content="Test" Width="100" Height="30"> <Button.ContextMenu> <ContextMenu> <MenuItem Header="1"/> <MenuItem Header="1123"/> <MenuItem Header="11234134532"/> <MenuItem Header="1234532"/> ...

0
0
发表了博客
2014/11/01 21:27

android,关于上下文菜单ContextMenu数据值的转递

在长按某view时,如该view有绑定OnCreateContextMenuListener,则会弹出ContextMenu上下文菜单,这类似于右键菜单,菜单弹出后点击某菜单项,则Activity或Fragment中的 public boolean onContextItemSelected(MenuItem item) 方法会响应菜单的点击,根据item的id来确定点击的是哪一个菜单项,从而进行进一步的操作。 那么现在的问题是,有时候我们只知道了点击的哪个菜单项是不够的,还需要知道更多的信息,比如菜单项是点击的“...

0
4
发表于大前端专区
2011/10/02 13:45

jQuery右键菜单插件ContextMenu

ContextMenu插件下载地址 http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 弄个DEMO玩玩吧! <script src='jquery.js'></script> <script src='jquery.contextmenu.js'></script> <p>   <span class="demo" style="background-color:yellow;"><b>DEMO right-click me!!</b></span> </p> <div class="contextMenu" id="myMenu">   <ul>   <li id="open">Open</li>   <li id="e...

1
2
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
6 评论
20 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部