快捷導(dǎo)航

jQuery右鍵菜單contextMenu使用實(shí)例

更新時(shí)間：2011年09月28日 23:52:51 作者：

在最近項(xiàng)目中需要頻繁的右鍵菜單操作。我采用了contextMenu這款jQuery插件。

在下面我們將設(shè)計(jì)一個(gè)場(chǎng)景，表格grid需要在每行實(shí)現(xiàn)鼠標(biāo)右鍵，增加，刪除，保存操作。grid我就用gridview了，隨便用微軟提供的樣式，測(cè)試用例不用搞的多好看嘛，我也不是做美工了，哈哈，偷偷懶。

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

ui代碼：

復(fù)制代碼代碼如下:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<%-- --%> 
<script src="Script/jquery.js" type="text/javascript"></script> 
<script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script> 
<style type="text/css"> 
.SelectedRow 
{ 
background: yellow; 
} 
.contextMenu 
{ 
display: none; 
} 
</style> 
<script type="text/javascript"> 
$(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()) > 10) { 
$("#save", menu).remove(); 
} 
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow"); 
return menu; 
} 
}); 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<div class="contextMenu" id="menu"> 
<ul> 
<li id="add"> 
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 
編輯</li> 
<li id="delete"> 
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 
刪除</li> 
<li id="save"> 
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 
保存</li> 
<li id="About"> 
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" /> 
關(guān)于</li> 
</ul> 
</div> 
<asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC" 
BorderStyle="None" BorderWidth="1px" CellPadding="3"> 
<RowStyle ForeColor="#000066" /> 
<FooterStyle BackColor="White" ForeColor="#000066" /> 
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" /> 
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" /> 
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" /> 
</asp:GridView> 
</div> 
</form> 
</body> 
</html> 

注：
1：contextMenu我們互根據(jù)數(shù)據(jù)記錄隱藏一些菜單項(xiàng)，這個(gè)可以在onShowMenu事件中，根據(jù)
e.currentTarget觸發(fā)源獲取數(shù)據(jù)，在根據(jù)remove菜單項(xiàng)。比如測(cè)試用例中的：如果id>10則不允許保存
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
2:事件注冊(cè)：根據(jù)第二個(gè)參數(shù)target獲取數(shù)據(jù)，第一個(gè)參數(shù)t獲取菜單項(xiàng)。比如：

復(fù)制代碼代碼如下:

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

在這里需要用到ajax和服務(wù)端通訊，可以采用我的上一篇組件：jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax輔助方法，將會(huì)更簡(jiǎn)單應(yīng)用ajax通訊。
在我下的源代碼中這里有點(diǎn)問(wèn)題：
原來(lái)的，這里的currentTarget始終為undefined。

復(fù)制代碼代碼如下:

 
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); 
$.each(cur.bindings, function(id, func) { 
$('#' + id, menu).bind('click', function(e) { 
hide(); 
func(trigger, currentTarget); 
}); 
}); 

我修改后：

復(fù)制代碼代碼如下:

 
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu); 
$.each(cur.bindings, function(id, func) { 
$('#' + id, menu).bind('click', function(ev) { 
hide(); 
func(trigger, e.currentTarget); 
}); 
}); 

這樣就一切正常了。
內(nèi)容很少，一切就在此打斷，結(jié)束，over！
附件下載：Demo

您可能感興趣的文章: