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)
