目前做的项目需要在页面里面用右键菜单，在网上找到两种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. ajax连接池和XMLHttpRequest

    连接池 我们公司在路由和交换机web界面和后端交互全部采用的是自己封装的ajax组件完成的,组件有点老了,代码风格和其中的某些用法现在看起来都有点不习惯.今天把这个组件的核心部分的ajax连接池记录下 ...

  2. 安卓 安装 platforms 的时候报错--访问 url 出错

    强制使用http 访问连接,并在hosts中添加地址,即可 问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com ...

  3. JSON 教程学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1. ______________ 知识点:1 ...

  4. 现代浏览器内置的可等效替代jQuery的功能

    jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...

  5. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  6. Delphi 调用外部程序并等待其运行结束

    转自:http://blog.csdn.net/xieyunc/article/details/4140620   如何让Delphi调用外部程序并等待其运行结束 1. uses     Window ...

  7. Vmware虚拟机的网络设置

    设置宿主机器的Vmnat8网络适配器. 设置IP地址如图所示 设置虚拟机的的网络 选择NAT方式 启动虚拟机,设置虚拟机的网络适配器

  8. Mcafee两个Mac版本之间的区别

    近期打算为Mac安装个杀毒软件,由于自己windows平台下用的是VSE,所以Mac平台也首选Mcafee家的东西了.到Mcafee官网下载点一看,有以下几个版本可以用在Mac上: 有点懵了,查看了一 ...

  9. ZOJ 3596Digit Number（BFS+DP）

    一道比较不错的BFS+DP题目 题意很简单,就是问一个刚好包含m(m<=10)个不同数字的n的最小倍数. 很明显如果直接枚举每一位是什么这样的话显然复杂度是没有上限的,所以需要找到一个状态表示方 ...

  10. 将php配置为服务

    将以下代码保存为php-fpm,修改路径为自己的路径(有php.ini的) #!/bin/bash # # Startup script for the PHP-FPM server. # # chk ...