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

2023-01-08 21:43:26

目前做的项目需要在页面里面用右键菜单，在网上找到两种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代码打包在附件的文件中

下面是一个例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="css/ContextMenu.css" rel="stylesheet" type="text/css" />
  6. <script src="js/lib/jquery-1.4.2.min.js" type="text/javascript"></script>
  7. <script src="js/lib/jquery.contextMenu.js" type="text/javascript"></script>
  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. $("#trigger1").contextMenu({
  11. menuId: 'contextMenu',
  12. onContextMenuItemSelected:function(menuItemId, $triggerElement){
  13. alert('trigger1'+menuItemId+' '+$triggerElement.attr('id'))
  14. },
  15. onContextMenuShow:function($triggerElement){
  16. alert('trigger1'+$triggerElement.attr('id'))
  17. },
  18. showShadow:false
  19. });
  20. $("#trigger1").disableContextMenuItems(['edit'])
  21. //$("#trigger1").enableContextMenuItems(['edit']) //解除某个菜单项的屏蔽
  22. //$("#trigger1").disableContextMenu(); //屏蔽菜单
  23. $("#trigger2").contextMenu({
  24. menuId: 'contextMenu',
  25. onContextMenuItemSelected:function(menuItemId, $triggerElement){
  26. alert('trigger2'+menuItemId+' '+$triggerElement.attr('id'))
  27. },
  28. onContextMenuShow:function($triggerElement){
  29. alert('trigger2'+$triggerElement.attr('id'))
  30. }
  31. });
  32. $("#trigger2").disableContextMenuItems(['delete'])  //屏蔽某个菜单项
  33. //$("#trigger2").enableContextMenuItems(['delete']) //解除某个菜单项的屏蔽
  34. })
  35. </script>
  36. </head>
  37. <body>
  38. <ul id="contextMenu" class="contextMenu">
  39. <li id="delete" class="delete">
  40. <a>删除</a>
  41. </li>
  42. <li id="edit" class="edit">
  43. <a>修改</a>
  44. </li>
  45. </ul>
  46. <div id="trigger1" style="width:100px;height:100px; font-weight: bold;">>trigger1</div>
  47. <div id="trigger2" style="width:100px;height:100px; font-weight: bold;">>trigger2</div>
  48. </body>
  49. </html>

插件的代码如下:

    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. if(jQuery)(function(){
    19. //全局变量
    20. var $shadow;
    21. var defaults={
    22. menuId:null,
    23. onContextMenuItemSelected:function(menuItemId, $triggerElement) {
    24. },
    25. onContextMenuShow:function($triggerElement){
    26. },
    27. showShadow:true,
    28. fadeInSpeed:150,
    29. fadeOutSpeed:75
    30. }
    31. $.extend($.fn, {
    32. contextMenu: function(o) {
    33. // Defaults
    34. if( o.menuId == undefined ) return false;//如果没有menuId则退出
    35. if( o.fadeInSpeed == undefined ) o.fadeInSpeed = defaults.fadeInSpeed;
    36. if( o.fadeOutSpeed == undefined ) o.fadeOutSpeed =  defaults.fadeOutSpeed;
    37. if( o.showShadow == undefined ) o.showShadow =  defaults.showShadow;
    38. // 0 needs to be -1 for expected results (no fade)
    39. if( o.fadeInSpeed == 0 ) o.fadeInSpeed = -1;
    40. if( o.fadeOutSpeed == 0 ) o.fadeOutSpeed = -1;
    41. // Loop each context menu
    42. var $menu = $('#' + o.menuId);
    43. //把menu移动到body下面，避免计算位置的时候出现问题
    44. if($menu.data('isMovedToBody')!=true){//只移动一次
    45. $menu.appendTo('body').data('isMovedToBody',true);
    46. }
    47. if(!$shadow){
    48. $shadow = $('<div></div>').css( {
    49. backgroundColor : '#000',
    50. position : 'absolute',
    51. opacity : 0.4
    52. }).appendTo('body').hide();
    53. }
    54. $(this).each(function(){
    55. var $triggerElement = $(this);
    56. $triggerElement.data('contextMenu',{
    57. $menu:$menu,
    58. isEnabled:true,
    59. disabledMenuItemIdList:[]
    60. })
    61. // Add contextMenu class
    62. $menu.addClass('contextMenu');
    63. $triggerElement.unbind('contextmenu').bind('contextmenu',function(e){
    64. var $currentTriggerElement=$(this);
    65. var contextMenu=$currentTriggerElement.data('contextMenu');
    66. //检查菜单是否被屏蔽
    67. if($currentTriggerElement.data('contextMenu').isEnabled===false) return false;
    68. //如果有定义onContextMenuShow,在显示前调用
    69. if(typeof o.onContextMenuShow=='function'){
    70. o.onContextMenuShow($currentTriggerElement);
    71. }
    72. //显示右键菜单
    73. showMenu(e);
    74. //绑定菜单项
    75. $menu.find('li').removeClass('disabled');
    76. var disabledMenuItemIdList=contextMenu.disabledMenuItemIdList;
    77. var queryStr='';
    78. if(disabledMenuItemIdList.length>0){
    79. var strDisabledMenuItemIdList='';
    80. for(var index in disabledMenuItemIdList){
    81. var disabledMenuItemId=disabledMenuItemIdList[index];
    82. if(index==0){
    83. strDisabledMenuItemIdList+='#'+disabledMenuItemId;
    84. }else{
    85. strDisabledMenuItemIdList+=',#'+disabledMenuItemId;
    86. }
    87. }
    88. queryStr='li:not('+strDisabledMenuItemIdList+')';
    89. $menu.find(strDisabledMenuItemIdList).addClass('disabled');
    90. }else{
    91. queryStr='li';
    92. }
    93. $menu.find('li').find('a').unbind('click');
    94. $menu.find(queryStr).find('a').bind('click',$currentTriggerElement,function(event){
    95. // Callback
    96. var callback=o.onContextMenuItemSelected;
    97. if(typeof callback=='function' ){
    98. callback( $(this).parent().attr('id'),event.data);
    99. }
    100. hideMenu();
    101. return false;
    102. });
    103. $(document).unbind('mousedown').bind('mousedown',function(event) {
    104. if($(event.target).parents('#'+o.menuId).html()==null){
    105. hideMenu();
    106. }
    107. });
    108. //阻止默认右键菜单
    109. return false;
    110. })
    111. // Disable text selection
    112. if( $.browser.mozilla ) {
    113. $menu.each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
    114. } else if( $.browser.msie ) {
    115. $menu.each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
    116. } else {
    117. $menu.each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
    118. }
    119. });
    120. function showMenu(event){
    121. //显示菜单
    122. $menu.css({
    123. 'left' : event.pageX,
    124. 'top' : event.pageY
    125. }).fadeIn(o.fadeInSpeed);
    126. //显示阴影
    127. if(o.showShadow){
    128. $shadow.css('zIndex',$menu.css('zIndex')-1);
    129. $shadow.css( {
    130. width : $menu.outerWidth(),
    131. height : $menu.outerHeight(),
    132. left : event.pageX + 2,
    133. top : event.pageY + 2
    134. }).fadeIn(o.fadeInSpeed);
    135. }
    136. }
    137. function hideMenu(){
    138. $menu.fadeOut(o.fadeOutSpeed);
    139. if(o.showShadow){
    140. $shadow.fadeOut(o.fadeOutSpeed);
    141. }
    142. }
    143. return $(this);
    144. },
    145. /**
    146. * 参数为id数组，如无参数则disable全部
    147. */
    148. disableContextMenuItems: function(o) {
    149. $(this).each(function(){
    150. var contextMenu=$(this).data('contextMenu');
    151. var $menu=contextMenu.$menu;
    152. if(o==undefined) {
    153. var list=[];
    154. $menu.find('li').each(function(){
    155. var menuItemId=$(this).attr('id');
    156. list.push(menuItemId);
    157. })
    158. contextMenu.disabledMenuItemIdList=list
    159. }else{
    160. contextMenu.disabledMenuItemIdList=o
    161. }
    162. })
    163. return( $(this) );
    164. },
    165. // Enable context menu items on the fly
    166. enableContextMenuItems: function(o) {
    167. $(this).each(function(){
    168. var contextMenu=$(this).data('contextMenu');
    169. var $menu=contextMenu.$menu;
    170. if(o==undefined) {
    171. contextMenu.disabledMenuItemIdList=[]
    172. }else{
    173. contextMenu.disabledMenuItemIdList=$.grep(contextMenu.disabledMenuItemIdList,function(value,index){
    174. if($.inArray(value,o)!=-1){
    175. return false;
    176. }else{
    177. return true
    178. }
    179. })
    180. }
    181. })
    182. return( $(this) );
    183. },
    184. // Disable context menu(s)
    185. disableContextMenu: function() {
    186. $(this).each( function() {
    187. var contextMenu=$(this).data('contextMenu');
    188. contextMenu.isEnabled=false;
    189. });
    190. return( $(this) );
    191. },
    192. // Enable context menu(s)
    193. enableContextMenu: function() {
    194. $(this).each( function() {
    195. var contextMenu=$(this).data('contextMenu');
    196. contextMenu.isEnabled=true;
    197. });
    198. return( $(this) );
    199. },
    200. // Destroy context menu(s)
    201. destroyContextMenu: function() {
    202. $(this).each( function() {
    203. $(this).removeData('contextMenu');
    204. });
    205. return( $(this) );
    206. }
    207. });
    208. })(jQuery);
上一篇：根据表结构自动生成JavaBean，史上最强最专业的表结构转JavaBean的工具(第2版)


下一篇：【VS开发】【图像处理】RGB Bayer Color分析