任意位置生成右键自定义菜单插件context.js之API与调用

context.js是一款轻量级jQuery右键菜单插件,支持Bootstrap风格菜单、递归子菜单及动态增删菜单项等功能。该插件提供丰富的菜单选项配置,包括横线间隔菜单、菜单链接等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jQuery轻量级右键菜单插件context.js,支持Bootstrap,可以选择使用或不使用Bootstrap,支持递归子菜单以及
横线间隔菜单,支持动态添加/删除菜单,支持菜单链接,样子还不错,推荐使用。
jQuery轻量级右键菜单插件context.js

使用方法:
1.加载插件和jQuery
1 <script src="js/jquery.min.js"></script>
2 <script src="js/context.js"></script>  
3 <link rel="stylesheet" type="text/css" href="css/context.standalone.css">

2.初始化
01 <script>
02 $(document).ready(function(){  
03     context.init({preventDoubleContext: false});
04     context.settings({compress: true});
05     context.attach('html', [//attach为绑定的dom对象,可以使用类名或id,例如'.classname'
06         {header: 'Compressed Menu'},
07         {text: 'Back', href: '#'},
08         {text: 'Reload', href: '#'},
09         {divider: true},
10         {text: 'Save As', href: '#'},
11         {text: 'Print', href: '#'},
12         {text: 'View Page Source', href: '#'},
13         {text: 'View Page Info', href: '#'},
14         {divider: true},
15         {text: 'Inspect Element', href: '#'},
16         {divider: true},
17         {text: 'Disable This Menu', action: function(e){
18             e.preventDefault();
19             context.destroy('html');
20             alert('html contextual menu destroyed!');
21         }},
22         {text: 'Donate?', action: function(e){
23             e.preventDefault();
24             $('#donate').submit();
25         }}
26     ]);
27 });
28 </script>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值