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

以你之姓@ 2023-07-10 15:39 16阅读 0赞

## 一、基本介绍 ##

### 1，插件说明 ###

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

*  GitHub 主页：[https://github.com/swisnl/jQuery-contextMenu][https_github.com_swisnl_jQuery-contextMenu]

### 2，功能特点 ###

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

### 3，安装配置 ###

*  使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css
 *  同时由于 contextMenu 依赖 jQuery（必须）和 jQuery UI position（非必须，但还是推荐使用），还必须将这两个引入进来。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"jquery-3.1.1.js"</code>&nbsp;<code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"contextMenu/jquery.ui.position.min.js"</code>&nbsp;<code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"contextMenu/jquery.contextMenu.js"</code>&nbsp;<code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>link</code>&nbsp;<code>href</code><code>=</code><code>"contextMenu/jquery.contextMenu.css"</code>&nbsp;<code>rel</code><code>=</code><code>"stylesheet"</code>&nbsp;<code>type</code><code>=</code><code>"text/css"</code>&nbsp;<code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 二，基本用法 ##

### 1，在单一的元素上添加菜单 ###

（1）效果图

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

[![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]   [![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1 1]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]

（2）样例代码

注意：  
本样例中右键菜单的触发元素是 button 按钮，它在页面初始化时就已经在那里了。  
但即使我们右键菜单先初始化，后面再在页面上动态创建对应的触发元素也是没有问题的。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 </td> 
 <td> <code>&lt;!DOCTYPE html&gt;</code> <code>&lt;html&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;head&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"utf-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;title&gt;&lt;/title&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script src=</code><code>"jquery-3.1.1.js"</code>&nbsp;<code>charset=</code><code>"utf-8"</code><code>&gt;&lt;/script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script src=</code><code>"contextMenu/jquery.ui.position.min.js"</code>&nbsp;<code>type=</code><code>"text/javascript"</code><code>&gt;&lt;/script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script src=</code><code>"contextMenu/jquery.contextMenu.js"</code>&nbsp;<code>type=</code><code>"text/javascript"</code><code>&gt;&lt;/script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;link href=</code><code>"contextMenu/jquery.contextMenu.css"</code>&nbsp;<code>rel=</code><code>"stylesheet"</code>&nbsp;<code>type=</code><code>"text/css"</code>&nbsp;<code>/&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/head&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;body&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;button class=</code><code>"context-menu-one"</code><code>&gt;按钮1&lt;/button&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//初始化菜单</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.contextMenu({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>selector:&nbsp;</code><code>'.context-menu-one'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback:&nbsp;</code><code>function</code><code>(key, options) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"点击了："</code>&nbsp;<code>+ key);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>items: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"edit"</code><code>: {name:&nbsp;</code><code>"编辑"</code><code>, icon:&nbsp;</code><code>"edit"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"cut"</code><code>: {name:&nbsp;</code><code>"剪切"</code><code>, icon:&nbsp;</code><code>"cut"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"copy"</code><code>: {name:&nbsp;</code><code>"复制"</code><code>, icon:&nbsp;</code><code>"copy"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"paste"</code><code>: {name:&nbsp;</code><code>"粘贴"</code><code>, icon:&nbsp;</code><code>"paste"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"delete"</code><code>: {name:&nbsp;</code><code>"删除"</code><code>, icon:&nbsp;</code><code>"delete"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"sep1"</code><code>:&nbsp;</code><code>"---------"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"quit"</code><code>: {name:&nbsp;</code><code>"退出"</code><code>, icon:&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>'context-menu-icon context-menu-icon-quit'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/script&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/body&gt;</code> <code>&lt;/html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 2，在多个元素上添加菜单 ###

（1）效果图

这个样例同上面的区别是让页面上所有的 li 元素都使用同一个菜单，即右键点击任意一个 li 元素都会显示菜单。

同时点击菜单项后，控制台中除了会输出菜单命令，还会输出对应的 li 元素的文本信息。

[![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1 2]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]   [![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1 3]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]

（2）样例代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 </td> 
 <td> <code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;&lt;button&gt;按钮1&lt;/button&gt;&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;&lt;button&gt;按钮2&lt;/button&gt;&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;按钮3&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;按钮4&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>$(</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//初始化菜单</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.contextMenu({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>selector:&nbsp;</code><code>'li'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback:&nbsp;</code><code>function</code><code>(key, options) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"点击了："</code>&nbsp;<code>+ key);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"来源："</code>&nbsp;<code>+ $(</code><code>this</code><code>).text());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>items: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"edit"</code><code>: {name:&nbsp;</code><code>"编辑"</code><code>, icon:&nbsp;</code><code>"edit"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"cut"</code><code>: {name:&nbsp;</code><code>"剪切"</code><code>, icon:&nbsp;</code><code>"cut"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"copy"</code><code>: {name:&nbsp;</code><code>"复制"</code><code>, icon:&nbsp;</code><code>"copy"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"paste"</code><code>: {name:&nbsp;</code><code>"粘贴"</code><code>, icon:&nbsp;</code><code>"paste"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"delete"</code><code>: {name:&nbsp;</code><code>"删除"</code><code>, icon:&nbsp;</code><code>"delete"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"sep1"</code><code>:&nbsp;</code><code>"---------"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"quit"</code><code>: {name:&nbsp;</code><code>"退出"</code><code>, icon:&nbsp;</code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>'context-menu-icon context-menu-icon-quit'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 三、子菜单 ##

items 节点里还可以嵌套配置，contextMenu 便会自动生成相应的子菜单。

### 1，效果图 ###

下面我们创建一个拥有三级子菜单的菜单。

[![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1 4]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]

### 2，样例代码 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 </td> 
 <td> <code>&lt;button&nbsp;</code><code>class</code><code>=</code><code>"context-menu-one"</code><code>&gt;按钮1&lt;/button&gt;</code> &nbsp; <code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>$(function() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//初始化菜单</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.contextMenu({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>selector:&nbsp;</code><code>'.context-menu-one'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>callback: function(key, options) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"点击了："</code>&nbsp;<code>+ key);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>items: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"edit"</code><code>: {name:&nbsp;</code><code>"编辑"</code><code>, icon:&nbsp;</code><code>"edit"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"cut"</code><code>: {name:&nbsp;</code><code>"剪切"</code><code>, icon:&nbsp;</code><code>"cut"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"sep1"</code><code>:&nbsp;</code><code>"---------"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold1"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:&nbsp;</code><code>"布局"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>items: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold1-key1"</code><code>: {name:&nbsp;</code><code>"相对定位"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold1-key2"</code><code>: {name:&nbsp;</code><code>"绝对定位定位"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold2"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name:&nbsp;</code><code>"对齐"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>items: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold2-key1"</code><code>: {name:&nbsp;</code><code>"左对齐"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold2-key2"</code><code>: {name:&nbsp;</code><code>"右对齐"</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"fold2-key3"</code><code>: {name:&nbsp;</code><code>"居中显示"</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

## 四、给菜单项单独配置回调方法 ##

我们知道所有的菜单项点击后都会触发配置的 callback 方法。其实每个菜单项也可以配置自己的 callback 方法。当然这个菜单项如果一旦有自定的 callback 方法，点击后是不会再调用外面那个 callback 方法了。

### 1，效果图 ###

我们给“编辑”项添加了个单独的 callback 方法，可以发现点击后触发的方法和其它两个菜单项不一样。

![2017102414304170268.png][]![uploading.4e448015.gif][]转存失败重新上传取消[![原文:jQuery - 右键菜单插件contextMenu使用详解1（安装配置、基本用法）][jQuery - _contextMenu_1 5]][jQuery - _contextMenu_1_jQuery - _contextMenu_1]

### 2，样例代码 ###

[https_github.com_swisnl_jQuery-contextMenu]: https://github.com/swisnl/jQuery-contextMenu
[jQuery - _contextMenu_1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDIzMTQ1OTAxOTAxMTgucG5n?x-oss-process=image/format,png
[jQuery - _contextMenu_1_jQuery - _contextMenu_1]: https://www.hangge.com/blog/cache/detail_1821.html#
[jQuery - _contextMenu_1 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDIzMTQ1OTM3NjIzNzcucG5n?x-oss-process=image/format,png
[jQuery - _contextMenu_1 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDIzMTUxNzE2MjA3ODAucG5n?x-oss-process=image/format,png
[jQuery - _contextMenu_1 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDIzMTUxNzU5MzcwMTAucG5n?x-oss-process=image/format,png
[jQuery - _contextMenu_1 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDI1MTQyMDA5MzY0NDUucG5n?x-oss-process=image/format,png
[2017102414304170268.png]: https://www.hangge.com/blog_uploads/201710/2017102414304170268.png
[uploading.4e448015.gif]: https://csdnimg.cn/release/mp/img/uploading.4e448015.gif
[jQuery - _contextMenu_1 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuaGFuZ2dlLmNvbS9ibG9nX3VwbG9hZHMvMjAxNzEwLzIwMTcxMDI0MTQzMDQxNzAyNjgucG5n?x-oss-process=image/format,png