目前做的项目需要在页面里面用右键菜单，在网上找到两种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. ylb：表的结构的修改和基本约束

    ylbtech-SQL Server:SQL Server-表的结构的修改和基本约束 SQL Server 表的结构的修改和基本约束. 1,表的结构的修改和基本约束返回顶部 use master go ...

  2. 基于XMPP协议的手机多方多端即时通讯方案

    一.开发背景 1.国际背景 随着Internet技术的高速发展,即时通信已经成为一种广泛使用的通信方式.1996年Mirabilis公司推出了世界上第一个即时通信系统ICQ,不到10年间,即时通信(I ...

  3. Free Candies

    题意: 有4堆东西,每堆有n个每个有一个颜色,现在有一个篮子最多能装5个不同的颜色的东西,每次都从堆顶拿,当篮子出现两个相同颜色,可以获得这两个东西,求获得的最大数量 分析: 因为就4推,可以把各堆的 ...

  4. 关于Cygwin的x-Server的自动运行以及相关脚本修改

    常常需要用到远端服务器的图形工具,如果在windows端没用xserver的话,很多程序无法运行.一个特殊的例子,emacs在没用xserver的时候,是直接在终端中打开的,如果不修改cygwin.b ...

  5. opencv3.0 在 android 上的使用

    下载 OpenCV-3.0.0-android-sdk-1.zip 打开 intellj,新建立一个 android 工程后选择工程属性,导入模块(Import module from externa ...

  6. 类 .xml

    pre{ line-height:1; color:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...

  7. python堡垒机

    堡垒机 windows下安装python3的paramiko模块后一些报错总结: error: Unable to find vcvarsall.bat [官网对此问题的描述] : https://d ...

  8. php 解压 .gz 文件

    在百度搜索到的 PharData 类和 ZipArchive 都是解压不了 .gz 的文件的,后来在 google 搜索到解决方法,问题解决. try { $phar = new PharData($ ...

  9. intel xdk 打ios的ipa包

    1.打包 2.点击edit.下载csr文件,然后上传到苹果开发者网址,生成cer文件 上面两步搞完,把最后的按钮设置成"yes" 3.上传配置文件

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

    都没心情学习了,睡觉.太失败了.  好了,你赢了,最怕女人不说话了,我妈一生气就不说话,有点怕我妈,你想删就把我删了吧,我不怪你. 给你个善意的建议,任何事情都要有度,过犹而不及,你是属于那种比较听家 ...