JQuery右鍵選單外掛ContextMenu使用指南

JQuery右鍵選單外掛ContextMenu使用指南

外掛下載地址:
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元素內建立contextmenu,並且可以自定義樣式.

複製程式碼 程式碼如下:
<HTML>
 <HEAD>
  <TITLE> JQuery右鍵選單 </TITLE>
  <script  src=”jquery-1.2.6.min.js”></script>
  <script src=”jquery.contextmenu.r2.js”></script>
 </HEAD>
 <BODY>
 <span class=”demo1″ style=”color:green;”>
    右鍵點此
 </span>
<hr />
<div id=”demo2″>
    右鍵點此
</div>
<hr />
<div class=”demo3″ id=”dontShow”>
  不顯示
</div>
<hr />
<div class=”demo3″ id=”showOne”>
  顯示第一項
</div>
<hr />
<div class=”demo3″ id=”showAll”>
  顯示全部
</div>
<hr />
    <!–右鍵選單的源–>
     <div class=”contextMenu” id=”myMenu1″>
      <ul>
        <li id=”open”><img src=”folder.png” /> 開啟</li>
        <li id=”email”><img src=”email.png” /> 郵件</li>
        <li id=”save”><img src=”disk.png” /> 儲存</li>
        <li id=”delete”><img src=”cross.png” /> 關閉</li>
      </ul>
    </div>
    <div class=”contextMenu” id=”myMenu2″>
        <ul>
          <li id=”item_1″>選項一</li>
          <li id=”item_2″>選項二</li>
          <li id=”item_3″>選項三</li>
          <li id=”item_4″>選項四</li>
        </ul>
   </div>
     <div class=”contextMenu” id=”myMenu3″>
         <ul>
          <li id=”item_1″>csdn</li>
          <li id=”item_2″>javaeye</li>
          <li id=”item_3″>itpub</li>
        </ul>
    </div>
 </BODY>
 <script>
    //所有class為demo1的span標籤都會繫結此右鍵選單
     $(‘span.demo1’).contextMenu(‘myMenu1’,
     {
          bindings:
          {
            ‘open’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was Open’);
            },
            ’email’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was Email’);
            },
            ‘save’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was Save’);
            },
            ‘delete’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was Delete’);
            }
          }
    });
    //所有html元素id為demo2的繫結此右鍵選單
    $(‘#demo2’).contextMenu(‘myMenu2’, {
      //選單樣式
      menuStyle: {
        border: ‘2px solid #000’
      },
      //選單項樣式
      itemStyle: {
        fontFamily : ‘verdana’,
        backgroundColor : ‘green’,
        color: ‘white’,
        border: ‘none’,
        padding: ‘1px’
      },
      //選單項滑鼠放在上面樣式
      itemHoverStyle: {
        color: ‘blue’,
        backgroundColor: ‘red’,
        border: ‘none’
      },
      //事件   
      bindings:
          {
            ‘item_1’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was item_1’);
            },
            ‘item_2’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was item_2’);
            },
            ‘item_3’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was item_3’);
            },
            ‘item_4’: function(t) {
              alert(‘Trigger was ‘ t.id ‘\nAction was item_4’);
            }
          }
    });
    //所有div標籤class為demo3的繫結此右鍵選單
    $(‘div.demo3’).contextMenu(‘myMenu3’, {
    //重寫onContextMenu和onShowMenu事件
      onContextMenu: function(e) {
        if ($(e.target).attr(‘id’) == ‘dontShow’) return false;
        else return true;
      },
      onShowMenu: function(e, menu) {
        if ($(e.target).attr(‘id’) == ‘showOne’) {
          $(‘#item_2, #item_3’, menu).remove();
        }
        return menu;
      }
    });
 </script>
</HTML>

效果圖:

很好玩很炫酷的功能吧,小夥伴們自己美化下,加入到自己的專案中去吧

您可能感興趣的文章:

jquery外掛ContextMenu設定右鍵選單jQuery右鍵選單contextMenu使用例項JS元件Bootstrap ContextMenu右鍵選單使用方法網頁中右鍵功能的實現方法之contextMenu的使用使用contextMenu外掛實現Bootstrap table彈出右鍵選單3種不同的ContextMenu右鍵選單實現程式碼開發 Internet Explorer 右鍵功能表(ContextMenu)jQuery外掛ContextMenu自定義圖示