目前做的项目需要在页面里面用右键菜单，在网上找到两种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. C# GDI+学习笔记1

    —前言 本文是学习C# GDI+系列的第一篇文章,简单的介绍了GDI+的一些基本绘图内容,比较粗糙.但本文主要是让大家简单的回顾一下GDI+的基本概念.本篇文章的参考代码请在此下载 . GDIPTes ...

  2. CURL --- 命令行浏览器CURL

    CURL --- 命令行浏览器CURL   CURL --- 命令行浏览器   CURL? 嗯,说来话长了~~~~ 这东西现在已经是苹果机上内置的命令行工具之一了,可见其魅力之一斑 1)二话不说,先从 ...

  3. size_type、size_t、differentce_type以及ptrdiff_t

      目录(?)[-] size_type size_t different_type ptrdiff_t size_t是unsigned类型,用于指明数组长度或下标,它必须是一个正数,std::siz ...

  4. 第一个UI脚本--python+selenium

    之前一直是用java+selenium做自动化测试的,最近因为工作需要,需要用pyhton+selenium去实现,于是就赶驴上架,熟悉了一下python的语法和脚本的编写过程,下面是一个简单的脚本, ...

  5. Cocos2d-android (01) 创建一个简单的cocos2d应用程序

    下载Cocos2d-android的源代码:cocos2d-android-1 git@github.com:ZhouWeikuan/cocos2d.git 将项目导入到eclipse中.运行实例: ...

  6. leetcode：Integer to Roman（整数转化为罗马数字）

    Question: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the rang ...

  7. 三年程序学习之二：（对web初认识）

    接着上一篇讲,之后第二天我就来公司上班了,主要是前端,CSS+DIV,table,网站维护之类的,这样的日子过了将近3个星期,一直没什么进展,自己也学不到什么技术,不过我觉得CSS+DIV我算是基础的 ...

  8. Android学习之散乱的知识点

    1. 安卓广告知名平台:有米,哇棒,架势,admob(国外,但效果不好)等,推荐用有米 2. src目录为源文件目录,所有可以被用户修改和创建的Java文件将被存放在这个目录下 3. xml中引用st ...

  9. erlang 基础知识

    一 数据类型 1. 整数 Integer Erlang可表示任意大的整数,大整数自动转换成bignums类型,比固定大小的整数类型相对效率较低. Base#Value 表示基数不是10的整数.如:2# ...

  10. 【CLR】奇妙的String

    - 一.背景 1. 以下代码的HashCode是否相同,它们是否是同个对象: var A = "ab" + "c"; var B = "abc&quo ...