JQuery 마우스 오른쪽 버튼 클릭 메뉴 플러그인 ContextMenu 사용 가이드_jquery

플러그인 다운로드 주소:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js

압축 버전:
http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js

Jquery 홈페이지: http://jquery.com/

이 플러그인을 통해 다양한 HTML 요소 내에 컨텍스트 메뉴를 설정할 수 있으며 스타일을 사용자 정의할 수 있습니다.

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

 
 
 
 
 
 
 
    右键点此
 

---

    右键点此

---

  不显示

---

  显示第一项

---

  显示全部

---

   
    

     

       
• 打开

       
• 邮件

       
• 保存

       
• 关闭

     

   

   

       

         
• 选项一

         
• 选项二

         
• 选项三

         
• 选项四

       

  

    

        

         
• csdn

         
• javaeye

         
• itpub

       

   

//demo1 클래스가 있는 모든 스팬 태그는 이 마우스 오른쪽 버튼 클릭 메뉴에 바인딩됩니다.
$('span.demo1').contextMenu('myMenu1',
{
바인딩:
              {
              '열기': 기능(t) {
Alert('트리거는 ' t.id 'nAction이 열려 있었습니다');
            },
             '이메일': 기능(t) {
Alert('트리거는 ' t.id 'nAction은 이메일이었습니다');
            },
             '저장': 함수(t) {
Alert('트리거는 ' t.id 'nAction은 저장이었습니다');
            },
             '삭제': 기능(t) {
Alert('트리거는 ' t.id 'nAction은 삭제되었습니다');
            }
          }
});
//ID가 데모2인 모든 html 요소는 이 마우스 오른쪽 버튼 클릭 메뉴에 바인딩됩니다.
$('#demo2').contextMenu('myMenu2', {
//메뉴 스타일
메뉴스타일: {
         테두리: '2px 실선 #000'
},
//메뉴 항목 스타일
항목 스타일: {
         FontFamily : 'verdana',
배경색상: '녹색',
        색상: '흰색',
         테두리: '없음',
         패딩: '1px'
},
//메뉴 항목 마우스 오버 스타일
itemHoverStyle: {
        색상: '파란색',
배경색상: '빨간색',
         테두리: '없음'
},
//이벤트
바인딩:
              {
              'item_1': 함수(t) {
Alert('트리거는 ' t.id 'nAction은 item_1이었습니다');
            },
             'item_2': 함수(t) {
Alert('트리거는 ' t.id 'nAction은 item_2였습니다');
            },
'item_3': 함수(t) {
Alert('트리거는 ' t.id 'nAction은 item_3이었습니다');
            },
             'item_4': 기능(t) {
Alert('트리거는 ' t.id 'nAction은 item_4였습니다');
            }
          }
});
//demo3 클래스가 있는 모든 div 태그는 이 마우스 오른쪽 버튼 클릭 메뉴에 바인딩됩니다.
$('div.demo3').contextMenu('myMenu3', {
//onContextMenu 및 onShowMenu 이벤트 다시 작성
onContextMenu: 함수(e) {
If ($(e.target).attr('id') == 'dontShow')는 false를 반환합니다.
         그렇지 않으면 true를 반환합니다.
},
onShowMenu: 기능(e, 메뉴) {
If ($(e.target).attr('id') == 'showOne') {
              $('#item_2, #item_3', 메뉴).remove();
}
         복귀 메뉴;
}
});

렌더링:

매우 재미있고 멋진 기능입니다. 친구 여러분, 이를 아름답게 꾸미고 자신의 프로젝트에 추가할 수 있습니다.