您的位置：首页 > Web前端 > JavaScript

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

2016-11-29 17:03 549 查看
jQuery轻量级右键菜单插件context.js，支持Bootstrap,可以选择使用或不使用Bootstrap，支持递归子菜单以及

横线间隔菜单，支持动态添加/删除菜单，支持菜单链接，样子还不错，推荐使用。



使用方法：
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.初始化

view
source

print?

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  自定义右键菜单 js context.js
相关文章推荐
新的分享
章节导航