简介

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

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

使用

1. 引入 jquery.js 、 jquery.ui.position.js（非必须，推荐使用）、jquery.contextMenu.js 和 jquery.contextMenu.css 文件

2.  调用

<script type="text/javascript">

      $(function() {

         //初始化菜单

         $.contextMenu({

             selector: '.context-menu-one',

             callback: function(key, options) {

                 console.log("点击了：" + key);

             },

             items: {

                 "edit": {name: "编辑", icon: "edit"},

                 "cut": {name: "剪切", icon: "cut"},

                 "copy": {name: "复制", icon: "copy"},

                 "paste": {name: "粘贴", icon: "paste"},

                 "delete": {name: "删除", icon: "delete"},

                 "sep1": "---------",

                 "quit": {name: "退出", icon: function(){

                     return 'context-menu-icon context-menu-icon-quit';

                 }}

             }

         });

      });

    </script>

相关链接

GitHub 地址 ：https://github.com/swisnl/jQuery-contextMenu