目前做的项目需要在页面里面用右键菜单，在网上找到两种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);

Jquery 右键菜单(ContextMenu)插件使用记录的更多相关文章

  1. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  2. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

  3. jQuery右键菜单ContextMenu使用笔记

    插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 和http://ww ...

  4. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  5. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  6. ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能

    更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...

  7. 【WPF】右键菜单ContextMenu可点击区域太小的问题

    问题描述 正常使用右键菜单ContextMenu时,如果菜单项是不变的,可以直接在XAML中写死,如下是给一个Button按钮添加了右键菜单功能. <Button Content="T ...

  8. 几款jQuery右键菜单插件

    1.jQuery Very Simple ContextMenu Plugin 2.ContextJS Project Page:http://lab.jakiestfu.com/contextjs/ ...

  9. js(jquery)右键菜单插件的实现

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: ...

随机推荐

  1. Struts1与Struts2的异同

    1.都是MVC的WEB框架 2.struts1是老牌框架,应用很广泛,有很好的群众基础,使用它开发风险很小,成本更低: struts2虽然基于这个框架,但是应用群众并不多,相对不成熟,未知的风险和变化 ...

  2. B-Tree、B+Tree和B*Tree

    B-Tree(这儿可不是减号,就是常规意义的BTree) 是一种多路搜索树: 1.定义任意非叶子结点最多只有M个儿子:且M>2: 2.根结点的儿子数为[2, M]: 3.除根结点以外的非叶子结点 ...

  3. 新手须知设计的法则 Mark

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律.且不痛不痒,都说要看点书.学点画.练软件.多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的? 学习是基于过往 ...

  4. phpcms V9实现QQ登陆OAuth2.0

    phpcmsV9使用的QQ登陆依然是OAuth1.0,但现在腾讯已经不审核使用OAuth1.0的网站了.这对于使用pc的站长来讲是一个无比巨大的坑.经过对phpcms论坛的一位同学做的插件进行修改,现 ...

  5. ios开发APP必须要了解的基本配置

    1,配置开发版本 AdHoc开发版,AppStore正式版 2,oc的宏转swift //常量=>ObjectC宏 letLoadingTip="加载中..." letiOS ...

  6. Tcl之group arguments

    1 doubel quotes This allows substitutions to occur within the quotations - or "interpolation&qu ...

  7. c++中获取字符cin,getchar,get,getline的区别

    http://www.imeee.cn/News/GouWu/20090801/221298.html cin.get()与getchar()函数有什么区别? 详细点..C++中几个输入函数的用法和区 ...

  8. Android：控件WebView显示网页 -摘自网络

    WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. webview有两个方法:setWebChromeClient 和 setWebClient setWebClient:主要 ...

  9. 第三百五十一天 how can I 坚持

    是应该喜欢还是厌烦这种状态,犹豫不定,毫无目标. 人不贪,谁信,我嘴上说我不贪,可是内心已经把我出卖了,要不怎么股票会被套呢. 别人贪婪时我恐惧,别人恐惧时我贪婪,我成了什么,别人贪婪时,我狂妄,别人 ...

  10. 第三百三十五天 how can I 坚持

    晚上回来看了个奥斯卡影片,<疯狂的麦克斯-狂暴之路>,挺震撼的场面.导演确实挺厉害,不知道是怎么想象出来的. 睡觉,明天继续.