jQuery右鍵菜單contextMenu執行個體

        在下面我們将設計一個場景，表格grid需要在每行實作滑鼠右鍵，增加，删除，儲存操作。grid我就用gridview了，随便用微軟提供的樣式，測試用例不用搞的多好看嘛，我也不是做美工了，哈哈，偷偷懶。

        先上效果圖，是有些同志說的有圖才有真相嘛：

<a target="_blank" href="http://blog.51cto.com/attachment/201204/172811522.png"></a>

ui代碼：

View Code   

&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %&gt;   

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;   

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;   

&lt;head runat="server"&gt;   

    &lt;title&gt;&lt;/title&gt;   

    &lt;%-- --%&gt;   

    &lt;script src="Script/jquery.js" type="text/javascript"&gt;&lt;/script&gt;   

    &lt;script src="Script/jquery.contextmenu.r2.js" type="text/javascript"&gt;&lt;/script&gt;   

    &lt;style type="text/css"&gt;   

        .SelectedRow   

        {   

            background: yellow;   

        }   

        .contextMenu   

            display: none;   

    &lt;/style&gt;   

    &lt;script type="text/javascript"&gt;   

        $(function() {   

            $('#GridView1 tr:gt(0)').contextMenu('menu',   

         {   

             bindings:   

          {   

              'add': function(t, target) {   

                  alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());   

              },   

              'delete': function(t, target) {   

                  alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());   

                  $(target).remove();   

              'save': function(t, target) {   

                  alert('Trigger：' + t.id + ' 儲存' + " taget by:" + $("td:eq(0)", target).text());   

              'About': function(t, target) {   

                  alert('Code by http://www.cnblogs.com/whitewolf/');   

              }   

          },   

             onShowMenu: function(e, menu) {   

                 if (parseInt($("td:eq(0)", e.currentTarget).text()) &gt; 10) {   

                     $("#save", menu).remove();   

                 }   

                 $(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");   

                 return menu;   

             }   

         });   

        })   

    &lt;/script&gt;   

&lt;/head&gt;   

&lt;body&gt;   

    &lt;form id="form1" runat="server"&gt;   

    &lt;div&gt;   

        &lt;div class="contextMenu" id="menu"&gt;   

            &lt;ul&gt;   

                &lt;li id="add"&gt;   

                    &lt;img src="image/Home_Age_UnSelect.jpg" width="16" height="16" /&gt;   

                    編輯&lt;/li&gt;   

                &lt;li id="delete"&gt;   

                    删除&lt;/li&gt;   

                &lt;li id="save"&gt;   

                    儲存&lt;/li&gt;   

                &lt;li id="About"&gt;   

                    關于&lt;/li&gt;   

            &lt;/ul&gt;   

        &lt;/div&gt;   

        &lt;asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"   

            BorderStyle="None" BorderWidth="1px" CellPadding="3"&gt;   

            &lt;RowStyle ForeColor="#000066" /&gt;   

            &lt;FooterStyle BackColor="White" ForeColor="#000066" /&gt;   

            &lt;PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /&gt;   

            &lt;SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /&gt;   

            &lt;HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /&gt;   

        &lt;/asp:GridView&gt;   

    &lt;/div&gt;   

    &lt;/form&gt;   

&lt;/body&gt;   

&lt;/html&gt;  

複制代碼 

注：

1：contextMenu我們互根據資料記錄隐藏一些菜單項，這個可以在onShowMenu事件中，根據

e.currentTarget觸發源擷取資料，在根據remove菜單項。比如測試用例中的：

如果id&gt;10則不允許儲存  

if (parseInt($("td:eq(0)", e.currentTarget).text()) &gt; 10) {   

                    $("#save", menu).remove();   

2:事件注冊：根據第二個參數target擷取資料，第一個參數t擷取菜單項。比如：

'add': function(t, target) {   

                 alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());   

             },  

在我下的源代碼中這裡有點問題：

原來的，這裡的currentTarget始終為undefined。

if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);   

$.each(cur.bindings, function(id, func) {   

    $('#' + id, menu).bind('click', function(e) {   

        hide();   

        func(trigger, currentTarget);   

    });   

});  

我修改後：

       $.each(cur.bindings, function(id, func) {   

           $('#' + id, menu).bind('click', function(ev) {   

               hide();   

               func(trigger, e.currentTarget);   

           });   

       });   

這樣就一切正常了。

内容很少，一切就在此打斷，結束 ，over！

 本文轉自 破狼 51CTO部落格，原文連結：http://blog.51cto.com/whitewolfblog/835183，如需轉載請自行聯系原作者