ContextMenu plugin

contextmenu是一个轻量级jquery插件，让您可以有选择性地对右键进行开发.

Examples

Example 1 - Basic usage with bindings

RIGHT CLICK FOR DEMO THIS WORKS TOO

Html

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

      <ul>

        <li id="open"><img src="folder.png" /> Open</li>

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

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

        <li id="close"><img src="cross.png" /> Close</li>

      </ul>

    </div>

Javascript

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

        }

      }

    });

The preceding code binds the context menu "myMenu1" to all span elements of class "demo1".

Example 2 - Basic styling

Right clicking anywhere in this paragraph will trigger the context menu.

Html

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

    <ul>

      <li id="item_1">Item 1</li>

      <li id="item_2">Item 2</li>

      <li id="item_3">Item 3</li>

      <li id="item_4">Item 4</li>

      <!-- etc... -->

    </ul>

  </div>

Javascript

    $('#demo2').contextMenu('myMenu2', {

      menuStyle: {

        border: '2px solid #000'

      },

      itemStyle: {

        fontFamily : 'verdana',

        backgroundColor : '#666',

        color: 'white',

        border: 'none',

        padding: '1px'

      },

      itemHoverStyle: {

        color: '#fff',

        backgroundColor: '#0f0',

        border: 'none'

      }

    });

  

The preceding code binds the context menu "myMenu2" to the element with id "demo2".

Example 3 - Advanced usage with callbacks

Don't show menu Just first item Show all

Html

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

    <ul>

      <li id="item_1">Item 1</li>

      <li id="item_2">Item 2</li>

      <li id="item_3">Item 3</li>

    </ul>

  </div>

Javascript

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

      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;

      }

    });