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="width:100px;height:100px; font-weight: bold;">>trigger1</div>  
  110.   
  111.         <div id="trigger2" style="width: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); 
posted @ 2014-07-02 11:13  技术狂  阅读(1485)  评论(0)  编辑  收藏  举报