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

一、基本介绍

1&＃xff0c;插件说明

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

• GitHub 主页&＃xff1a;https://github.com/swisnl/jQuery-contextMenu

2&＃xff0c;功能特点

• 多种上下文菜单触发方式&＃xff1a;右键单击、左键单击、鼠标悬停、自定义触发事件
• 在触发对象添加或移除的时候&＃xff0c;委托处理事件不需要重新初始化
• 按需动态创建菜单
• 支持命令图标&＃xff08;可选&＃xff09;
• 支持多种菜单输入元素&＃xff1a;text, textarea, checkbox, radio, select
• 支持自定义 html 元素
• 支持显示/隐藏回调来更新命令的状态
• 即使有数百个触发对象也只占用很小的内存
• 自动调整菜单的位置以适应窗口
• 支持启用/禁用命令
• 支持嵌套子菜单
• 支持全键盘互动
• 支持 HTML5
• 支持通过 CSS 设置样式

3&＃xff0c;安装配置

• 使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css
• 同时由于 contextMenu 依赖 jQuery&＃xff08;必须&＃xff09;和 jQuery UI position&＃xff08;非必须&＃xff0c;但还是推荐使用&＃xff09;&＃xff0c;还必须将这两个引入进来。

二&＃xff0c;基本用法

1&＃xff0c;在单一的元素上添加菜单

&＃xff08;1&＃xff09;效果图

• 我们在“按钮1”上绑定一个菜单&＃xff0c;右键点击即可弹出菜单。
• 点击菜单项后菜单消失&＃xff0c;同时在控制台中输出对应菜单项的命令。

   转存失败重新上传取消

2&＃xff0c;样例代码