好久没写博客了,今天简单介绍一款jQuery鼠标右键菜单contextMenu,这里首先要感谢我的漫漫程序之旅(原文http://www.blogjava.net/supercrsky/articles/250091.html)。在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。

        在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作。grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒。

        先上效果图,是有些同志说的有图才有真相嘛:

ui代码:

  1. View Code   
  2.  
  3. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>   
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  6. <html xmlns="http://www.w3.org/1999/xhtml">   
  7. <head runat="server">   
  8.     <title></title>   
  9.     <%-- --%>   
  10.  
  11.     <script src="Script/jquery.js" type="text/javascript"></script>   
  12.  
  13.     <script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script>   
  14.  
  15.     <style type="text/css">   
  16.         .SelectedRow   
  17.         {   
  18.             background: yellow;   
  19.         }   
  20.         .contextMenu   
  21.         {   
  22.             display: none;   
  23.         }   
  24.     </style>   
  25.  
  26.     <script type="text/javascript">   
  27.         $(function() {   
  28.             $('#GridView1 tr:gt(0)').contextMenu('menu',   
  29.          {   
  30.              bindings:   
  31.           {   
  32.               'add'function(t, target) {   
  33.                   alert('Trigger:' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());   
  34.               },   
  35.               'delete'function(t, target) {   
  36.                   alert('Trigger:' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());   
  37.                   $(target).remove();   
  38.               },   
  39.               'save'function(t, target) {   
  40.                   alert('Trigger:' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());   
  41.               },   
  42.               'About'function(t, target) {   
  43.                   alert('Code by http://www.cnblogs.com/whitewolf/');   
  44.               }   
  45.           },   
  46.              onShowMenu: function(e, menu) {   
  47.  
  48.                  if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {   
  49.                      $("#save", menu).remove();   
  50.                  }   
  51.                  $(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");   
  52.                  return menu;   
  53.              }   
  54.  
  55.          });   
  56.  
  57.         })   
  58.     </script>   
  59.  
  60. </head>   
  61. <body>   
  62.     <form id="form1" runat="server">   
  63.     <div>   
  64.         <div class="contextMenu" id="menu">   
  65.             <ul>   
  66.                 <li id="add">   
  67.                     <img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />   
  68.                     编辑</li>   
  69.                 <li id="delete">   
  70.                     <img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />   
  71.                     删除</li>   
  72.                 <li id="save">   
  73.                     <img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />   
  74.                     保存</li>   
  75.                 <li id="About">   
  76.                     <img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />   
  77.                     关于</li>   
  78.             </ul>   
  79.         </div>   
  80.         <asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"   
  81.             BorderStyle="None" BorderWidth="1px" CellPadding="3">   
  82.             <RowStyle ForeColor="#000066" />   
  83.             <FooterStyle BackColor="White" ForeColor="#000066" />   
  84.             <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />   
  85.             <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />   
  86.             <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />   
  87.         </asp:GridView>   
  88.     </div>   
  89.     </form>   
  90. </body>   
  91. </html>  
  92. 复制代码 

注:

1:contextMenu我们互根据数据记录隐藏一些菜单项,这个可以在onShowMenu事件中,根据

e.currentTarget触发源获取数据,在根据remove菜单项。比如测试用例中的:

  1. 如果id>10则不允许保存  
  2.  
  3. if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {   
  4.                     $("#save", menu).remove();   

2:事件注册:根据第二个参数target获取数据,第一个参数t获取菜单项。比如:

  1. 'add'function(t, target) {   
  2.                  alert('Trigger:' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());   
  3.              },  
 在这里需要用到ajax和服务端通讯,可以采用我的上一篇组件:jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法,将会更简单应用ajax通讯。

在我下的源代码中这里有点问题:

原来的,这里的currentTarget始终为undefined。

  1. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);   
  2.  
  3. $.each(cur.bindings, function(id, func) {   
  4.     $('#' + id, menu).bind('click'function(e) {   
  5.         hide();   
  6.         func(trigger, currentTarget);   
  7.     });   
  8. });  
我修改后:
  1. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);   
  2.  
  3.        $.each(cur.bindings, function(id, func) {   
  4.            $('#' + id, menu).bind('click'function(ev) {   
  5.                hide();   
  6.                func(trigger, e.currentTarget);   
  7.            });   
  8.        });   
这样就一切正常了。

内容很少,一切就在此打断,结束 ,over!

其他资料jQuery目录:  我jQuery系列之目录汇总

附件下载:Demo