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タグは、この右クリックメニューにバインドされます
$('span.demo1').contextMenu('myMenu1',
{
バインディング:
{
'open': function(t) {
alert('トリガーは 't.id 'nアクションはオープンでした');
},
'メール': function(t) {
alert('トリガーは 't.id'nアクションはメール');
},
'保存': function(t) {
alert('トリガーは 't.id'nアクションは保存されました');
},
'削除': function(t) {
alert('トリガーは 't.id 'nアクションは削除でした');
}
}
});
//demo2 の ID を持つすべての HTML 要素は、この右クリック メニューにバインドされます
$('#demo2').contextMenu('myMenu2', {
//メニュースタイル
メニュースタイル: {
境界線: '2px ソリッド #000'
}、
//メニュー項目のスタイル
アイテムスタイル: {
fontFamily : 'verdana',
背景色: '緑'、
色: '白'、
境界: 'なし'、
パディング: '1px'
}、
//メニュー項目のマウスオーバー スタイル
itemHoverStyle: {
色: '青'、
背景色: '赤'、
境界線: 'なし'
}、
//イベント
バインディング:
{
'item_1': function(t) {
alert('トリガーは ' t.id 'nアクションは item_1 でした');
},
'item_2': function(t) {
alert('トリガーは ' t.id 'nアクションは item_2 でした');
},
'item_3': function(t) {
alert('トリガーは 't.id 'nアクションは item_3');
},
'item_4': function(t) {
alert('トリガーは ' t.id 'nアクションは item_4 でした');
}
}
});
//クラスdemo3を持つすべてのdivタグは、この右クリックメニューにバインドされます
$('div.demo3').contextMenu('myMenu3', {
//onContextMenu および onShowMenu イベントを書き換えます
onContextMenu: function(e) {
If ($(e.target).attr('id') == 'dontShow') return false;
それ以外の場合は true を返します;
}、
onShowMenu: function(e, menu) {
If ($(e.target).attr('id') == 'showOne') {
$('#item_2, #item_3', menu).remove();
}
メニューに戻る;
}
});

レンダリング:

とても楽しくてクールな機能です。美化して自分のプロジェクトに追加できます