zoukankan      html  css  js  c++  java

  • Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单，在网上找到两种jquery的右键菜单插件，但是都有各种问题。所以就自己动手把两种插件结合了下。 

    修改后的右键菜单插架可以根据绑定的触发页面元素不同，复用同一个菜单使之根据触发页面元素有不同的行为。
    支持多个个触发页面元素复用同一个菜单时，分开禁用或恢复禁用菜单或某些菜单项目。 

    一些说明: 
    1.菜单的样式由css文件contextMenu.css决定，可以根据需要自行修改,请根据实际情况设定z-index的值，保证菜单在最高的一层 
    2.请将菜单直接放于body下，至少不要让菜单的样式需要受除body外的样式来决定，因为在绑定的时候会把菜单移动到body下面。 
    3.这个插件是我根据http://www.trendskitchens.co.nz/jquery/contextmenu/和 
    http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/在后者的基础上修改的。 
    4.目前粗略测试在ie8,chrome,firefox下面工作正常. 
    5.例子和js代码打包在附件的文件中 

    下面是一个例子： 

    Html代码  收藏代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2.   
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4.   
    5.     <head>  
    6.   
    7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    8.   
    9.         <link href="css/ContextMenu.css" rel="stylesheet" type="text/css" />  
    10.   
    11.   
    12.   
    13.         <script src="js/lib/jquery-1.4.2.min.js" type="text/javascript"></script>  
    14.   
    15.         <script src="js/lib/jquery.contextMenu.js" type="text/javascript"></script>  
    16.   
    17.   
    18.   
    19.         <script type="text/javascript">  
    20.   
    21.             $(document).ready(function() {  
    22.   
    23.   
    24.   
    25.                     $("#trigger1").contextMenu({  
    26.   
    27.                         menuId: 'contextMenu',  
    28.   
    29.                         onContextMenuItemSelected:function(menuItemId, $triggerElement){  
    30.   
    31.                             alert('trigger1'+menuItemId+' '+$triggerElement.attr('id'))  
    32.   
    33.                         },  
    34.   
    35.                         onContextMenuShow:function($triggerElement){  
    36.   
    37.                             alert('trigger1'+$triggerElement.attr('id'))  
    38.   
    39.                         },  
    40.   
    41.                         showShadow:false  
    42.   
    43.                     });  
    44.   
    45.                      $("#trigger1").disableContextMenuItems(['edit'])   
    46.   
    47.                     //$("#trigger1").enableContextMenuItems(['edit']) //解除某个菜单项的屏蔽  
    48.   
    49.                     //$("#trigger1").disableContextMenu(); //屏蔽菜单  
    50.   
    51.                       
    52.   
    53.                     $("#trigger2").contextMenu({  
    54.   
    55.                         menuId: 'contextMenu',  
    56.   
    57.                         onContextMenuItemSelected:function(menuItemId, $triggerElement){  
    58.   
    59.                             alert('trigger2'+menuItemId+' '+$triggerElement.attr('id'))  
    60.   
    61.                         },  
    62.   
    63.                         onContextMenuShow:function($triggerElement){  
    64.   
    65.                             alert('trigger2'+$triggerElement.attr('id'))  
    66.   
    67.                         }  
    68.   
    69.                     });  
    70.   
    71.                      $("#trigger2").disableContextMenuItems(['delete'])  //屏蔽某个菜单项  
    72.   
    73.                      //$("#trigger2").enableContextMenuItems(['delete']) //解除某个菜单项的屏蔽  
    74.   
    75.   
    76.   
    77.             })  
    78.   
    79.   
    80.   
    81.         </script>  
    82.   
    83.   
    84.   
    85.   
    86.   
    87.     </head>  
    88.   
    89.   
    90.   
    91.     <body>  
    92.   
    93.         <ul id="contextMenu" class="contextMenu">  
    94.   
    95.                 <li id="delete" class="delete">  
    96.   
    97.                     <a>删除</a>  
    98.   
    99.                 </li>  
    100.   
    101.                 <li id="edit" class="edit">  
    102.   
    103.                     <a>修改</a>  
    104.   
    105.                 </li>  
    106.   
    107.         </ul>  
    108.   
    109.         <div id="trigger1" style="100px;height:100px; font-weight: bold;">>trigger1</div>  
    110.   
    111.         <div id="trigger2" style="100px;height:100px; font-weight: bold;">>trigger2</div>  
    112.   
    113.     </body>  
    114.   
    115. </html>  




    插件的代码如下: 

    Js代码  收藏代码
      1. // 原作者信息：  
      2. // jQuery Context Menu Plugin  
      3. //  
      4. // Version 1.01  
      5. //  
      6. // Cory S.N. LaViska  
      7. // A Beautiful Site (http://abeautifulsite.net/)  
      8. //  
      9. // More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/  
      10. //  
      11. // Terms of Use  
      12. //  
      13. // This plugin is dual-licensed under the GNU General Public License  
      14. //   and the MIT License and is copyright A Beautiful Site, LLC.  
      15. //  
      16. // mod信息：  
      17. // modified by shadowlin 2011-03-02  
      18.   
      19.   
      20. if(jQuery)(function(){  
      21.     //全局变量  
      22.     var $shadow;  
      23.     var defaults={  
      24.         menuId:null,  
      25.         onContextMenuItemSelected:function(menuItemId, $triggerElement) {             
      26.         },  
      27.         onContextMenuShow:function($triggerElement){  
      28.         },  
      29.         showShadow:true,  
      30.         fadeInSpeed:150,  
      31.         fadeOutSpeed:75  
      32.     }  
      33.     $.extend($.fn, {  
      34.         contextMenu: function(o) {  
      35.             // Defaults  
      36.             if( o.menuId == undefined ) return false;//如果没有menuId则退出  
      37.             if( o.fadeInSpeed == undefined ) o.fadeInSpeed = defaults.fadeInSpeed;  
      38.             if( o.fadeOutSpeed == undefined ) o.fadeOutSpeed =  defaults.fadeOutSpeed;  
      39.             if( o.showShadow == undefined ) o.showShadow =  defaults.showShadow;  
      40.             // 0 needs to be -1 for expected results (no fade)  
      41.             if( o.fadeInSpeed == 0 ) o.fadeInSpeed = -1;  
      42.             if( o.fadeOutSpeed == 0 ) o.fadeOutSpeed = -1;  
      43.             // Loop each context menu  
      44.             var $menu = $('#' + o.menuId);  
      45.             //把menu移动到body下面，避免计算位置的时候出现问题  
      46.             if($menu.data('isMovedToBody')!=true){//只移动一次  
      47.                 $menu.appendTo('body').data('isMovedToBody',true);  
      48.             }  
      49.             if(!$shadow){  
      50.                 $shadow = $('<div></div>').css( {  
      51.                     backgroundColor : '#000',  
      52.                     position : 'absolute',  
      53.                     opacity : 0.4  
      54.                 }).appendTo('body').hide();  
      55.             }  
      56.             $(this).each(function(){  
      57.                 var $triggerElement = $(this);  
      58.                 $triggerElement.data('contextMenu',{  
      59.                     $menu:$menu,  
      60.                     isEnabled:true,  
      61.                     disabledMenuItemIdList:[]  
      62.                 })  
      63.                 // Add contextMenu class  
      64.                 $menu.addClass('contextMenu');  
      65.                 $triggerElement.unbind('contextmenu').bind('contextmenu',function(e){  
      66.                     var $currentTriggerElement=$(this);  
      67.                     var contextMenu=$currentTriggerElement.data('contextMenu');  
      68.                     //检查菜单是否被屏蔽  
      69.                     if($currentTriggerElement.data('contextMenu').isEnabled===false) return false;  
      70.                     //如果有定义onContextMenuShow,在显示前调用  
      71.                     if(typeof o.onContextMenuShow=='function'){  
      72.                         o.onContextMenuShow($currentTriggerElement);  
      73.                     }  
      74.                     //显示右键菜单  
      75.                     showMenu(e);  
      76.                     //绑定菜单项  
      77.                     $menu.find('li').removeClass('disabled');  
      78.                     var disabledMenuItemIdList=contextMenu.disabledMenuItemIdList;  
      79.                     var queryStr='';  
      80.                     if(disabledMenuItemIdList.length>0){  
      81.                         var strDisabledMenuItemIdList='';  
      82.                         for(var index in disabledMenuItemIdList){  
      83.                             var disabledMenuItemId=disabledMenuItemIdList[index];  
      84.                             if(index==0){  
      85.                                 strDisabledMenuItemIdList+='#'+disabledMenuItemId;  
      86.                             }else{  
      87.                                 strDisabledMenuItemIdList+=',#'+disabledMenuItemId;  
      88.                             }  
      89.                         }  
      90.                           
      91.                         queryStr='li:not('+strDisabledMenuItemIdList+')';  
      92.                         $menu.find(strDisabledMenuItemIdList).addClass('disabled');  
      93.                     }else{  
      94.                         queryStr='li';  
      95.                     }  
      96.                     $menu.find('li').find('a').unbind('click');  
      97.                     $menu.find(queryStr).find('a').bind('click',$currentTriggerElement,function(event){  
      98.                         // Callback  
      99.                         var callback=o.onContextMenuItemSelected;  
      100.                         if(typeof callback=='function' ){  
      101.                             callback( $(this).parent().attr('id'),event.data);  
      102.                         }  
      103.                         hideMenu();  
      104.                         return false;  
      105.                     });  
      106.                     $(document).unbind('mousedown').bind('mousedown',function(event) {  
      107.                         if($(event.target).parents('#'+o.menuId).html()==null){  
      108.                             hideMenu();  
      109.                         }  
      110.                     });  
      111.                     //阻止默认右键菜单  
      112.                     return false;  
      113.                 })  
      114.                 // Disable text selection  
      115.                 if( $.browser.mozilla ) {  
      116.                     $menu.each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });  
      117.                 } else if( $.browser.msie ) {  
      118.                     $menu.each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });  
      119.                 } else {  
      120.                     $menu.each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });  
      121.                 }  
      122.             });  
      123.               
      124.             function showMenu(event){  
      125.                 //显示菜单  
      126.                 $menu.css({  
      127.                     'left' : event.pageX,  
      128.                     'top' : event.pageY  
      129.                 }).fadeIn(o.fadeInSpeed);  
      130.                 //显示阴影  
      131.                 if(o.showShadow){  
      132.                     $shadow.css('zIndex',$menu.css('zIndex')-1);  
      133.                     $shadow.css( {  
      134.                         width : $menu.outerWidth(),  
      135.                         height : $menu.outerHeight(),  
      136.                         left : event.pageX + 2,  
      137.                         top : event.pageY + 2  
      138.                     }).fadeIn(o.fadeInSpeed);  
      139.                 }  
      140.   
      141.             }  
      142.               
      143.             function hideMenu(){  
      144.                 $menu.fadeOut(o.fadeOutSpeed);  
      145.                 if(o.showShadow){  
      146.                     $shadow.fadeOut(o.fadeOutSpeed);  
      147.                 }  
      148.             }  
      149.             return $(this);  
      150.         },  
      151.           
      152.         /** 
      153.          * 参数为id数组，如无参数则disable全部 
      154.          */  
      155.         disableContextMenuItems: function(o) {  
      156.             $(this).each(function(){  
      157.                 var contextMenu=$(this).data('contextMenu');  
      158.                 var $menu=contextMenu.$menu;  
      159.                 if(o==undefined) {  
      160.                     var list=[];  
      161.                     $menu.find('li').each(function(){  
      162.                         var menuItemId=$(this).attr('id');  
      163.                         list.push(menuItemId);  
      164.                     })  
      165.                     contextMenu.disabledMenuItemIdList=list  
      166.                 }else{  
      167.                     contextMenu.disabledMenuItemIdList=o  
      168.                 }  
      169.             })  
      170.             return( $(this) );  
      171.         },  
      172.           
      173.         // Enable context menu items on the fly  
      174.         enableContextMenuItems: function(o) {  
      175.             $(this).each(function(){  
      176.                 var contextMenu=$(this).data('contextMenu');  
      177.                 var $menu=contextMenu.$menu;  
      178.                 if(o==undefined) {  
      179.                     contextMenu.disabledMenuItemIdList=[]  
      180.                 }else{  
      181.                     contextMenu.disabledMenuItemIdList=$.grep(contextMenu.disabledMenuItemIdList,function(value,index){  
      182.                         if($.inArray(value,o)!=-1){  
      183.                             return false;  
      184.                         }else{  
      185.                             return true  
      186.                         }  
      187.                           
      188.                     })  
      189.                 }  
      190.             })  
      191.             return( $(this) );  
      192.         },  
      193.           
      194.         // Disable context menu(s)  
      195.         disableContextMenu: function() {  
      196.             $(this).each( function() {  
      197.                 var contextMenu=$(this).data('contextMenu');  
      198.                 contextMenu.isEnabled=false;  
      199.             });  
      200.             return( $(this) );  
      201.         },  
      202.           
      203.         // Enable context menu(s)  
      204.         enableContextMenu: function() {  
      205.             $(this).each( function() {  
      206.                 var contextMenu=$(this).data('contextMenu');  
      207.                 contextMenu.isEnabled=true;  
      208.             });  
      209.             return( $(this) );  
      210.         },  
      211.           
      212.         // Destroy context menu(s)  
      213.         destroyContextMenu: function() {  
      214.             $(this).each( function() {  
      215.                 $(this).removeData('contextMenu');  
      216.             });  
      217.             return( $(this) );  
      218.         }  
      219.           
      220.     });  
      221. })(jQuery); 
  • 相关阅读:
    待整理[图片验证码的破解]
    关于反爬的思索[集合]
    关于showdoc的服务器部署[转]
    jQuery插件实现多图片和单图片上传
    FTP 图片上传
    多线程（临界点处理）
    Python可迭代对象、迭代器和生成器
    一文搞懂Python函数（匿名函数、嵌套函数、闭包、装饰器）！
    Python比较操作符、变量赋值、对象拷贝
    Python并发编程——多线程与协程
  • 原文地址：https://www.cnblogs.com/ranzige/p/3812379.html
Copyright © 2011-2022 走看看