一、基本介绍
1,插件说明
(1)contextMenu 是一个专门用于 Web 应用的右键菜单插件。
(2)与一般的菜单插件不同,contextMenu 不需要将其自身绑定到触发对象上。这就使得我们可以随时注入和删除触发器,而不必重新初始化或更新 contextMenu。
(3)contextMenu 可以根据需要创建菜单,即根据触发元素的不同而不同。同时还支持动态创建上下文菜单。
(2)与一般的菜单插件不同,contextMenu 不需要将其自身绑定到触发对象上。这就使得我们可以随时注入和删除触发器,而不必重新初始化或更新 contextMenu。
(3)contextMenu 可以根据需要创建菜单,即根据触发元素的不同而不同。同时还支持动态创建上下文菜单。
- 多种上下文菜单触发方式:右键单击、左键单击、鼠标悬停、自定义触发事件
- 在触发对象添加或移除的时候,委托处理事件不需要重新初始化
- 按需动态创建菜单
- 支持命令图标(可选)
- 支持多种菜单输入元素:text, textarea, checkbox, radio, select
- 支持自定义 html 元素
- 支持显示/隐藏回调来更新命令的状态
- 即使有数百个触发对象也只占用很小的内存
- 自动调整菜单的位置以适应窗口
- 支持启用/禁用命令
- 支持嵌套子菜单
- 支持全键盘互动
- 支持 HTML5<menu>
- 支持通过 CSS 设置样式
3,安装配置
- 使用 contextMenu 要引入 jquery.contextMenu.js 和 jquery.contextMenu.css
- 同时由于 contextMenu 依赖 jQuery(必须)和 jQuery UI position(非必须,但还是推荐使用),还必须将这两个引入进来。
1
2
3
4
|
<
script
src
=
"jquery-3.1.1.js"
charset
=
"utf-8"
></
script
>
<
script
src
=
"contextMenu/jquery.ui.position.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"contextMenu/jquery.contextMenu.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"contextMenu/jquery.contextMenu.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
|
二,基本用法
1,在单一的元素上添加菜单
(1)效果图- 我们在“按钮1”上绑定一个菜单,右键点击即可弹出菜单。
- 点击菜单项后菜单消失,同时在控制台中输出对应菜单项的命令。
(2)样例代码
注意:
本样例中右键菜单的触发元素是 button 按钮,它在页面初始化时就已经在那里了。
但即使我们右键菜单先初始化,后面再在页面上动态创建对应的触发元素也是没有问题的。
本样例中右键菜单的触发元素是 button 按钮,它在页面初始化时就已经在那里了。
但即使我们右键菜单先初始化,后面再在页面上动态创建对应的触发元素也是没有问题的。
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
>
<title></title>
<script src=
"jquery-3.1.1.js"
charset=
"utf-8"
></script>
<script src=
"contextMenu/jquery.ui.position.min.js"
type=
"text/javascript"
></script>
<script src=
"contextMenu/jquery.contextMenu.js"
type=
"text/javascript"
></script>
<link href=
"contextMenu/jquery.contextMenu.css"
rel=
"stylesheet"
type=
"text/css"
/>
</head>
<body>
<button class=
"context-menu-one"
>按钮1</button>
<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>
</body>
</html>
|
2,在多个元素上添加菜单
(1)效果图
这个样例同上面的区别是让页面上所有的 li 元素都使用同一个菜单,即右键点击任意一个 li 元素都会显示菜单。
同时点击菜单项后,控制台中除了会输出菜单命令,还会输出对应的 li 元素的文本信息。
(2)样例代码
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
|
<ul>
<li><button>按钮1</button></li>
<li><button>按钮2</button></li>
<li>按钮3</li>
<li>按钮4</li>
</ul>
<script type=
"text/javascript"
>
$(
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'
;
}}
}
});
});
</script>
|
三、子菜单
items 节点里还可以嵌套配置,contextMenu 便会自动生成相应的子菜单。
1,效果图
下面我们创建一个拥有三级子菜单的菜单。
2,样例代码
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
|
<button
class
=
"context-menu-one"
>按钮1</button>
<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"
},
"sep1"
:
"---------"
,
"fold1"
: {
name:
"布局"
,
items: {
"fold1-key1"
: {name:
"相对定位"
},
"fold1-key2"
: {name:
"绝对定位定位"
},
"fold2"
: {
name:
"对齐"
,
items: {
"fold2-key1"
: {name:
"左对齐"
},
"fold2-key2"
: {name:
"右对齐"
},
"fold2-key3"
: {name:
"居中显示"
}
}
},
}
},
}
});
});
</script>
|
四、给菜单项单独配置回调方法
我们知道所有的菜单项点击后都会触发配置的 callback 方法。其实每个菜单项也可以配置自己的 callback 方法。当然这个菜单项如果一旦有自定的 callback 方法,点击后是不会再调用外面那个 callback 方法了。
1,效果图
我们给“编辑”项添加了个单独的 callback 方法,可以发现点击后触发的方法和其它两个菜单项不一样。
2,样例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<button class=
"context-menu-one"
>按钮1</button>
<script type=
"text/javascript"
>
$(
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"
},
}
});
});
</script>
|
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_1821.html