后台管理系统:实现右键菜单(jQuery的contextMenu插件使用详解)

【Flutter 问题系列第 16 篇】如何防止软键盘弹出后顶掉内容 Flutter 如何防止软键盘弹出后顶掉内容 阅读详情

目录

一、基本介绍

1、插件说明

2、安装配置

二、基本用法

1、效果图

2、样例代码

3、属性说明


一、基本介绍

1、插件说明

(1)contextMenu 是一个专门用于 Web 应用的右键菜单插件。
(2)GitHub 主页:GitHub - swisnl/jQuery-contextMenu: jQuery contextMenu plugin & polyfill

2、安装配置

  • 使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css
  • 同时由于 contextMenu 依赖 jQuery(必须)。
<link href="css/jquery.contextMenu.min.css" rel="stylesheet"/>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/plugins/contextMenu/jquery.contextMenu.min.js"></script>

二、基本用法

1、效果图

  • 在“页签操作”上绑定一个菜单,右键点击即可弹出菜单。
  • 点击菜单项后菜单消失,同时在控制台中输出对应菜单项的命令。

      

2、样例代码

$.contextMenu({
        selector: ".J_menuTab",
        appendTo:"div#context-menus-container",
        trigger: 'right',
        autoHide: true,
        items: {
            "close_current": {
                name: "关闭当前",
                callback: function(key, opt) {
                	opt.$trigger.find('i').trigger("click");
                }
            },
            "close_other": {
                name: "关闭其他",
                callback: function(key, opt) {
                	$(".J_tabCloseOther").trigger("click");
                }
            },
            "close_all": {
                name: "全部关闭",
                callback: function(key, opt) {
					$('.J_tabCloseAll').trigger("click");
                }
            },
        }
    })

3、属性说明

属性名属性值属性说明
selector.J_menuTab选择器
appendTodiv#context-menus-container指定生成的菜单要附加到的选择器字符串或 DOMElement
trigger默认:right

触发的方式

right:鼠标右击

left:鼠标单击

hover:悬停元素

touchstart:仅限触摸启动

none:无触发

hideOnSecondTrigger默认:false表示第二个触发器是否应关闭菜单的标志
selectableSubMenu默认:false指定包含子菜单的菜单项是否应该是可点击的
reposition默认:true指定如果在同一元素(或其子项)上执行第二个触发事件(如右键单击)而菜单仍然可见,则菜单是否应重新定位 ( true) 或重建 ( false)
delay默认:200指定显示菜单前等待的时间(以毫秒为单位)。仅适用于触发器:“悬停”
autoHide默认:false指定当鼠标指针移出触发器和菜单项时是否必须隐藏菜单
zIndex默认:1指定要添加到​​​​​​​触发元素的计算 zIndex 的偏移量。设置为0以防止 zIndex 操作。可以是一个函数,它返回一个 int 来计算构建时的 zIndex
classNamecontextmenu-custom contextmenu-custom__highlight指定要添加到菜单元素的其他类名。使用空格分隔多个类。
classNames

hover: 'hover', // Item hover disabled: 'disabled', // Item disabled visible: 'visible', // Item visible notSelectable: 'not-selectable',

icon: 'context-menu-icon',

iconEdit: 'context-menu-icon-edit', iconCut: 'context-menu-icon-cut', iconCopy: 'context-menu-icon-copy',

iconPaste: 'context-menu-icon-paste',

iconDelete: 'context-menu-icon-delete', iconAdd: 'context-menu-icon-add', iconQuit: 'context-menu-icon-quit', iconLoadingClass: 'context-menu-icon-loading'

指定上下文菜单元素的基类名称。这可用于更改某些可能与 Bootstrap 等框架冲突的类的类名

C# 工业上位机集成 YOLOv8 全实战:模型转换→相机取流→PLC 联动落地部署 // 检测结果实体类,工业场景扩展置信度、坐标、类别字段set;set;set;set;/// 模型配置常量,与导出参数保持一致// 置信度阈值// 非极大值抑制阈值public static readonly string[] ClassNames = { "物料", "缺陷", "挡板" };// 自定义类别本文完整实现了YOLO模型转换→C#上位机集成→工业相机对接→PLC联动→现场部署标准化模型转换流程,杜绝C#端兼容性问题;解耦相机取流、推理、UI线程,满足工业高稳定性要求; 阅读详情

相关推荐

jQuery右键菜单ContextMenu详细使用

NULL 博文链接:https://justcoding.iteye.com/blog/2110279

jquery实现在网页指定区域显示自定义右键菜单效果

本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果。分享给大家供大家参考。具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单。运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-area-right-click-menu-codes/ 具体代码如下: <!DOCTYPE htm

基于Prescan与MATLAB的CC定速巡航模型实现及Simulink模型完整分析 Prescan

内容概要:本文详细介绍了如何使用Prescan软件版本8.5和MATLAB实现CC定速巡航模型及其Simulink模型的完整分析。首先,在Prescan中创建了真实的驾驶环境,包括道路、车辆和传感器模型。接着,在MATLAB中实现了CC算法,该算法能根据当前车速和目标车速进行加速和减速的设定。最后,通过Simulink模型对定速巡航功能进行了全面测试和分析,模拟不同驾驶场景并优化控制算法,从而提升车辆的驾驶性能和安全性。适合人群:从事智能交通系统研究、自动驾驶技术研发的专业人士,尤其是有一定MATLAB和Prescan使用经验的研发人员。使用场景及目标:适用于需要构建和测试定速巡航系统的研发团队,旨在提高车辆的驾驶性能和安全性,推动智能交通系统的发展。其他说明:文中提供了详细的步骤和技术细节,帮助读者理解和应用CC定速巡航模型的设计与实现方法。

Agents-A1-8bit未来展望:视觉语言AI的发展趋势

Agents-A1-8bit是基于MLX框架的8位量化视觉语言AI模型,作为InternScience/Agents-A1的量化版本,它融合了Qwen3.5-MoE架构与高效的8位量化技术,为视觉语言处理领域带来了全新的可能性。随着AI技术的飞速发展,视觉语言AI正成为连接计算机视觉与自然语言处理的重要桥梁,而Agents-A1-8bit凭借其独特的架构和性能优势,有望在未来的发展中扮演关键角色。

gitblog_01135的博客 762

JQuery右键菜单插件ContextMenu使用指南

插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 代码如下: <HTML>  <HEAD>   <TITLE> JQuery右键菜单 </TITLE>  

jQuery - 右键菜单插件contextMenu使用详解1(安装配置、基本用法

一、基本介绍 1,插件说明 (1)contextMenu是一个专门用于Web应用的右键菜单插件。 (2)与一般的菜单插件不同,contextMenu不需要将其自身绑定到触发对象上。这就使得我们可以随时注入和删除触发器,而不必重新初始化或更新contextMenu。 (3)contextMenu可以根据需要创建菜单,即根据触发元素的不同而不同。同时还支持动态创建上下文菜单。 Git...

shadow_zed的博客 7879

如何实现jquery自定义点击右键菜单显示

jquery自定义点击右键菜单显示其实很简单,只要下载一个smartMenu.js和一个smartMenu.css两个文件之后,将两个文件分别加入到css和js文件夹下面,然后在前台写上以下代码,就可以实现右键菜单的自定义了,代码如下:    $(“#user li”).bind("mousedown"                 , function (e) {            

yu13767514297的专栏 5258

前端高效开发必备:jsTree树形控件完全指北

Hi,我是前端人类学!后台管理系统开发中,组织架构、菜单权限、文件管理等场景常需树形结构展示,优质树形控件的开发难度较高。而jsTree是基于 jQuery 的免费开源 MIT 协议树形插件,功能强大、配置灵活,可满足绝大多数树形控件开发需求。

chaosweet的博客 321

JQueryContextMenu(右键菜单)

插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.jsJquery主页: http://jquery.com/插件...

weixin_33985507的博客 413

jQuery】简单的右键菜单

1.说明 在浏览器点击右键会弹出一个浏览器自带的默认菜单,不过有些场景我们需要一个自定义的菜单,这时候我们要阻止默认菜单并显示我们自己做好的菜单 2.代码 我们简单使用ul和li创建一个菜单 HTML代码 <ul class="contextmenu"> <li> <span>详情</span> </li> <li> <span>功能1</span>

冰冷的希望的博客 1941

JQUERY_contextMenu_学习

[menuContext首页:http://www.trendskitchens.co.nz/jquery/contextmenu/] contextMenu的js文件学习: /* *!!!!!![$(x).contextMenu(id,options)---便于称呼先暂时称:对元素x的一次绑定(x可能是一个元素集合)] * 元素x称为绑定元素 *给元素添加右...

iteye_3366的博客 330

Jquery系列之contextMenu右键菜单使用

本博客介绍一下一款开源的jquery右键菜单插件使用,github链接:https://github.com/swisnl/jQuery-contextMenu 样例代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;

Nicky's blog 4836

jquery 右键菜单 插件

jQuery右键菜单插件简介 在Web开发中,右键菜单是一个常见的交互方式,可以为用户提供更多的操作选项。而利用jQuery插件可以方便地实现这一功能。今天我们来介绍一个简单易用的jQuery右键菜单插件,让你的网页交互更加丰富。 插件介绍 这个插件名为contextMenu,是一个轻量级的右键菜单插件,可以通过简单的设置...

weixin_36444881的博客 281

jquery EasyUi tree实现右键菜单

Jquery EasyUi tree实现右键菜单

weixin_46388225的博客 751

jQuery-contextMenu 插件全面解析与使用指南

jQuery-contextMenu是一款功能强大的右键菜单插件,专为需要为大量对象提供上下文菜单的Web应用程序设计。与传统的右键菜单实现不同,该插件采用了一种创新的设计理念:将菜单本身作为主要对象,而触发菜单的元素则作为次要对象。这种设计使得单个菜单定义可以被多个触发对象共享,无需为每个对象单独绑定菜单。 ## 核心设计理念 该插件的核心优势在于其独特的内存管理机制: 1. **菜单与触

gitblog_01104的博客 524

Privasis-Cleaner-4B社区贡献指南:如何参与这个开源隐私保护项目

想要为Privasis-Cleaner-4B这个开源隐私保护项目做出贡献吗?🤔 作为一款基于Qwen3 4B Instruct模型构建的轻量级文本净化模型,Privasis-Cleaner-4B专注于从文本中移除或抽象敏感信息,为数据工程师、机器学习从业者和处理敏感文本的组织提供强大的隐私保护工具。本文将为您提供完整的社区参与指南,帮助您快速上手并成为这个开源隐私保护项目的有价值贡献者!🚀

gitblog_00053的博客 465

基于 jQuery 的简单好用的右键弹出菜单插件

基于 jQuery 的鼠标点击弹出菜单,仅仅一个函数调用,能满足一些基本要求 支持 FontAwesome 自定义菜单图标样式(选项配置) 引用 <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/tianlunvip/popmenu/popmenu.css"> <script src="//cdn.jsdelivr.ne...

tianlunvip的专栏 552

jQuery contextMenu自定义上下文插件插件简单使用

jQuery contextMenu自定义上下文插件插件最近有需求需要禁用浏览器默认的右键,自定义新的功能,用到了 jQuery contextMenu这个插件,这个插件主要是用于创建右键弹出菜单jQuery插件官网地址 github地址 第一步:下载包 源码是放在github上的,我是通过git下载的 git clone https://github.com/swisnl/jQuery-co

yanhappiness 1929

jQuery contextMenu使用

地址:jQuery contextMenu 需要以下文件: jquery.contextMenu.css jquery.min.css jquery.contextMenu.js jquery.ui.position.js PS:第一次使用的时,是给spread.sheet添加右键菜单,页面被多个spread充满,因为没有添加jquery.contextMenu.cs...

dkvzkrdok146612647的博客 361
上一篇: 超市订单管理系统(SMBMS):盘点管理
下一篇: 微信小程序:wx.scanCode组件 & wx.chooseMedia组件
eqilin2022
博客等级 码龄4年 802粉丝 · 15原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值