jquery原創實用插件之03 屏蔽默認右鍵菜單,自定義右鍵菜單


效果圖如下

代碼如下

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

 1 /*
 2  * version : 1.0.1
 3  * site    : *******************
 4  * author  : Jerry(http://www.cnblogs.com/webdesign-Jerry/)
 5  * date    : 2013/01/18
 6  * email   : jerry_webdesign@msn.cn
 7  */
 8 
 9 ;(function($){    
10     $.extend($,{
11         showRightMenu:function(options){
12             var options  = $.extend(true,{menuList:[]},options);    
13             var $menuList=options.menuList;
14             var menu={
15                 init:function(){
16                     this.length=$menuList.length;
17                     $(document).bind('mousedown',this.mouseDownOnDocument);
18                 },
19                 mouseDownOnDocument:function(e){
20                     e.stopPropagation();
21                     var which=e.which;
22                     var x=e.pageX+5;
23                     var y=e.pageY+5;
24                     var id=$(e.target).parents('ul').parent().attr('id');
25                     if(which==3){
26                         menu.showMenu(x,y);
27                         document.oncontextmenu=function(){
28                             return false;    
29                         };
30                     }else if(which==1&&id!='rightMenu'){
31                         menu.removeMenu();    
32                     };
33                 },
34                 showMenu:function(a,b){
35                     if($('#rightMenu').length<=0){
36                         $('body').append('<div id="rightMenu"><ul></ul></div>');
37                         var str='';
38                         for(var i=0;i<menu.length;i++){
39                             str+='<li><a href="javascript:;" title="'+$menuList[i].menuName+'">'+$menuList[i].menuName+'</a></li>';
40                         };
41                         $('#rightMenu ul').append(str);    
42                     }
43                     var W=$(window).width();
44                     var H=$(window).height();
45                     var w=$('#rightMenu').outerWidth(true);
46                     var h=$('#rightMenu').outerHeight(true);
47                     a+w>=W?a-=w+5:a;
48                     b+h>=H?b-=h+5:b;
49                     $('#rightMenu').css({'left':a,'top':b});
50                     $('#rightMenu ul li a').click(function(){
51                         var index=$(this).parent().index();
52                         menu.callBack(index);    
53                     });
54                 },
55                 callBack:function(a){
56                     $menuList[a].callBack();
57                     menu.removeMenu();    
58                 },
59                 removeMenu:function(){
60                     $('#rightMenu').remove();
61                 }
62             };
63             menu.init();
64         }    
65     });
66 })(jQuery);
1 /* rightMenu */
2 #rightMenu{ width:120px; background:#aaa;padding:0px 2px 2px 0px; position:absolute; z-index:9999;}
3 #rightMenu ul{border:solid 1px #999; padding:0px 1px; background:#f7f7f7;margin:-2px 0px 0px -2px;}
4 #rightMenu ul li{ border-bottom:solid 1px #eee;border-top:solid 1px #fff; line-height:28px;}
5 #rightMenu ul li a{ display:block; padding:0px 10px;}
6 #rightMenu ul li a:hover{ background:#aaa; color:#fff; text-decoration:none;}

 調用如下

 1 ;(function($){
 2     
 3     //右鍵菜單
 4     $.showRightMenu({
 5         menuList:[
 6             {menuName:'菜單欄目1',callBack:function(){ console.log(11);}},
 7             {menuName:'菜單欄目2',callBack:function(){ console.log(22);}},
 8             {menuName:'菜單欄目3',callBack:function(){ console.log(33);}},
 9             {menuName:'菜單欄目4',callBack:function(){ console.log(44);}},
10             {menuName:'菜單欄目5',callBack:function(){ console.log(55);}}
11         ]    
12     });
13 })(jQuery)

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com