后台管理系统：实现右键菜单（jQuery的contextMenu插件使用详解）

目录

一、基本介绍

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、属性说明