登录注册

jQuery鼠标右键菜单插件(原创)

插件特效
2026-07-21 13:14 4 次浏览 • 0 次下载 3.8KB
jQuery鼠标右键菜单插件(原创)

更新时间：2021-03-23 00:13:02

更新说明：美化样式，增加皮肤

更新时间：2021-03-16 00:17:30

更新说明：美化了样式

更新时间：2021-03-16 00:05:09

使用方法

引入js和css

1
2
3
4
<link rel="stylesheet" type="text/css" href="css/context-menu.css"/>
<link rel="stylesheet" href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/context-menu.js"></script>

调用方式：

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
37
38
39
40
41
42
43
44
45
46
47
48
$("#menu4").mouseMenu({
//一级菜单
options: [{
title: '刷新',
//子菜单会自动禁用
disabled: true,
icon: '<i class="fa fa-refresh"></i>',
child: [{
title: '刷新当前',
icon: '<i class="fa fa-android"></i>'
},
{
title: '刷新全部',
icon: '<i class="fa fa-apple"></i>'
},
]
}, {
title: '锁定',
icon: '<i class="fa fa-lock"></i>'
}, {
title: '关闭',
icon: '<i class="fa fa-close"></i>',
child: [{
title: '关闭当前',
icon: '<i class="fa fa-camera"></i>'
},
{
title: '关闭其它',
icon: '<i class="fa fa-calendar"></i>'
},
{
title: '全部关闭',
disabled: true,
icon: '<i class="fa fa-database"></i>'
}
],
}, {
title: '新窗口打开',
icon: '<i class="fa fa-plus"></i>'
}, ],
afterInit: function(ul) { //初始化后显示菜单
ul.css({
'top': 100,
'left': 710
}).show();
}
});

如果需要动态修改禁用属性,或者修改选项，只需重新调用mouseMenu方法，设置disabled属性即可

评论