jQuery 오른쪽 클릭 메뉴 contextMenu 사용법 example_jquery

아래에서는 테이블 그리드가 각 행에 대해 마우스 오른쪽 버튼 클릭, 추가, 삭제 및 저장 작업을 구현해야 하는 시나리오를 설계합니다. 그리드의 경우에는 Microsoft에서 제공하는 스타일만 사용합니다. 테스트 케이스가 너무 아름다울 필요는 없습니다. 하하.

첫째, 일부 동지들은 사진을 통해서만 진실을 밝힐 수 있다고 말합니다.

ui 코드:

코드 복사 코드는 다음과 같습니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx. cs" Inherits=" Default2" %>



<제목>< ;/title>
<%-- --%>
;
< ;script src="Script/jquery.contextmenu.r2.js" type="text/javascript">
<스크립트 유형= "text/javascript">
$(function() {
$('#GridView1 tr:gt(0)').contextMenu('메뉴',
{
바인딩:
{
'add': function(t, target) {
alert('Trigger: 't.id' add' " taget by:" $("td:eq(0) ", target).text());
},
'delete': function(t, target) {
alert('Trigger:' t.id ' delete' " taget by:" $ ("td:eq (0)", target).text());
$(target).remove()
},
'save': function(t, target) {
alert(' 트리거: ' t.id ' 저장 ' " taget by:" $("td:eq(0)", target).text())
},
'정보': function(t, target ) {
alert('Code by http://www.cnblogs.com/whitewolf/')
}
},
onShowMenu: function(e, 메뉴) {
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow")
반환 메뉴; );
})

>

• 수정


• "image/Home_Age_UnSelect .jpg" width="16" height="16" />
  삭제
  
• image/Home_Age_UnSelect .jpg" width="16" height="16" />
  저장


• 
  
  정보

BorderStyle="None" BorderWidth="1px" CellPadding="3"> < ;RowStyle ForeColor="#000066" />

/ html>


참고:
1: contextMenu는 데이터 레코드를 기반으로 일부 메뉴 항목을 숨깁니다. 이는
e.currentTarget 트리거 소스를 기반으로 onShowMenu 이벤트에서 수행할 수 있습니다. 제거 메뉴 항목을 기반으로 데이터를 얻습니다. 예를 들어 테스트 케이스에서 id>10이면 저장이 허용되지 않습니다.
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$ ("#save", menu).remove();
}
2: 이벤트 등록: 두 번째 매개변수 대상에 따라 데이터를 가져오고, 첫 번째 매개변수 t에 따라 메뉴 항목을 가져옵니다. 예:




코드 복사

코드는 다음과 같습니다.


'add': function( t, target) {
alert('트리거: ' t.id ' 증가 ' " taget by:" $("td:eq(0)", target).text()),


여기에는 Ajax와 서버측 통신이 필요합니다. 이전 기사의 구성 요소를 사용할 수 있습니다. jQuery Ajax는 AjaxPro.Utility.RegisterTypeForAjax 보조 메서드를 모방하므로 Ajax 통신을 더 쉽게 적용할 수 있습니다.
다운로드한 소스 코드에 문제가 있습니다.
원래 여기의 currentTarget은 항상 정의되지 않았습니다.

코드 복사 코드는 다음과 같습니다.

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

수정 후:

코드 복사 코드는 다음과 같습니다.

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

이렇게 하면 모든 것이 정상입니다.
컨텐트가 거의 없고 모든 것이 중단되어 여기서 끝납니다. 오버!
첨부파일 다운로드: 데모