JQuery右鍵菜單插件ContextMenu使用指南

更新時(shí)間：2014年12月19日 11:18:57 投稿：hebedich

這篇文章主要介紹了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主頁(yè): http://jquery.com/

通過(guò)此插件可以在不同的html元素內(nèi)建立contextmenu,并且可以自定義樣式.

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

<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;">

    右鍵點(diǎn)此

 </span>

<hr />

<div id="demo2">

    右鍵點(diǎn)此

</div>

<hr />

<div class="demo3" id="dontShow">

  不顯示

</div>

<hr />

<div class="demo3" id="showOne">

  顯示第一項(xiàng)

</div>

<hr />

<div class="demo3" id="showAll">

  顯示全部

</div>

<hr />

    <!--右鍵菜單的源-->

     <div class="contextMenu" id="myMenu1">

      <ul>

        <li id="open"><img src="folder.png" /> 打開(kāi)</li>

        <li id="email"><img src="email.png" /> 郵件</li>

        <li id="save"><img src="disk.png" /> 保存</li>

        <li id="delete"><img src="cross.png" /> 關(guān)閉</li>

      </ul>

    </div>

    <div class="contextMenu" id="myMenu2">

        <ul>

          <li id="item_1">選項(xiàng)一</li>

          <li id="item_2">選項(xiàng)二</li>

          <li id="item_3">選項(xiàng)三</li>

          <li id="item_4">選項(xiàng)四</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標(biāo)簽都會(huì)綁定此右鍵菜單

     $('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'

      },

      //菜單項(xiàng)樣式

      itemStyle: {

        fontFamily : 'verdana',

        backgroundColor : 'green',

        color: 'white',

        border: 'none',

        padding: '1px'

      },

      //菜單項(xiàng)鼠標(biāo)放在上面樣式

      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標(biāo)簽class為demo3的綁定此右鍵菜單

    $('div.demo3').contextMenu('myMenu3', {

    //重寫(xiě)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>