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

一、基本介绍

1，插件说明

(1)contextMenu 是一个专门用于 Web应用的右键菜单插件。

(2)与一般的菜单插件不同，contextMenu不需要将其自身绑定到触发对象上。这就使得我们可以随时注入和删除触发器，而不必重新初始化或更新 contextMenu。

(3)contextMenu可以根据需要创建菜单，即根据触发元素的不同而不同。同时还支持动态创建上下文菜单。

多种上下文菜单触发方式：右键单击、左键单击、鼠标悬停、自定义触发事件

在触发对象添加或移除的时候，委托处理事件不需要重新初始化

按需动态创建菜单

支持命令图标(可选)

支持多种菜单输入元素：text, textarea, checkbox, radio, select

支持自定义 html元素

支持显示/隐藏回调来更新命令的状态

即使有数百个触发对象也只占用很小的内存

自动调整菜单的位置以适应窗口

支持启用/禁用命令

支持嵌套子菜单

支持全键盘互动

支持 HTML5

支持通过 CSS设置样式

3，安装配置

使用 contextMenu要引入 jquery.contextMenu.js和 jquery.contextMenu.css

同时由于 contextMenu依赖 jQuery(必须)和 jQuery UI position(非必须，但还是推荐使用)，还必须将这两个引入进来。

二，基本用法

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

(1)效果图

我们在“按钮1”上绑定一个菜单，右键点击即可弹出菜单。

点击菜单项后菜单消失，同时在控制台中输出对应菜单项的命令。

   

(2)样例代码

注意：

本样例中右键菜单的触发元素是 button按钮，它在页面初始化时就已经在那里了。

但即使我们右键菜单先初始化，后面再在页面上动态创建对应的触发元素也是没有问题的。

按钮1

$(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';

}}

}

});

});

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

(1)效果图

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

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

   

(2)样例代码

• 按钮1
• 按钮2
• 按钮3
• 按钮4

$(function() {

//初始化菜单

$.contextMenu({

selector: 'li',

callback: function(key, options) {

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

console.log("来源：" + $(this).text());

},

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';

}}

}

});

});

三、子菜单

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

1，效果图

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

2，样例代码

按钮1

$(function() {

//初始化菜单

$.contextMenu({

selector: '.context-menu-one',

callback: function(key, options) {

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

},

items: {

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

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

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

"fold1": {

name: "布局",

items: {

"fold1-key1": {name: "相对定位"},

"fold1-key2": {name: "绝对定位定位"},

"fold2": {

name: "对齐",

items: {

"fold2-key1": {name: "左对齐"},

"fold2-key2": {name: "右对齐"},

"fold2-key3": {name: "居中显示"}

}

},

}

},

}

});

});

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

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

1，效果图

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

2，样例代码

按钮1

$(function() {

//初始化菜单

$.contextMenu({

selector: '.context-menu-one',

callback: function(key, options) {

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

},

items: {

"edit": {

name: "编辑",

icon: "edit",

callback: function(itemKey, opt, rootMenu, originalEvent) {

console.log("“编辑”菜单项被点击了");

}

},

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

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

}

});

});