ContextMenu plugin

转载：http://www.trendskitchens.co.nz/jquery/contextmenu/

ContextMenu plugin

ContextMenu is a lightweight jQuery plugin that lets you selectively override the browser's right-click menu with a custom one of your own.

DEMO right-click me!!

Features

• Use multiple menus on one page
• Menus can be bound to multiple elements
• Fully stylable
• Assign context-sensitive callbacks

Current Version

Version	r2
Released	16 July 2007
Author	Chris Domigan (cdomigan at gmail dot com)
Contributors	Dan G. Switzer, II
Download	Source js file (4.3 KB) Compressed js file (2.5 KB)
Requires	jQuery v1.1 or greater
Supports	Firefox 1.5+ Internet Explorer 6.0+

Changelog

• r2 - 16 July 2007
  • Defaults now correctly applied
  • Added shadow, eventPosX, eventPosY, onContextMenu and onShowMenu options
  • Many of these changes care of Dan G. Switzer, II. Thanks Dan!
• r1 - 9 March 2007
  • First release

Usage

$(elements).contextMenu(String menu_id [, Object settings]);

You define your menu structure in your HTML markup. For each menu, place an unordered list in a div with class "contextMenu" and the id you will refer to it by (see the examples). The div can be placed anywhere as it will automatically be hidden by the plugin. 
You can have as many menus defined on a page as you like. Each <li> element will act as an option on the menu. Give each <li> a unique id so that actions can be bound to it. 
Note: ContextMenu does not currently support nested menus. This feature may be in an upcoming release.

Parameters

menu_id

The id of the menu as defined in your markup. You can bind one or more elements to a menu. Eg $("table td").contextMenu("myMenu") will bind the menu with id "myMenu" to all table cells. 
Note: This behaviour has changed from r1 where you needed a "#" before the id

settings

ContextMenu takes an optional settings object that lets you style your menu and bind click handlers to each option. ContextMenu supports the following properties in the settings object:

bindings

An object containing "id":function pairs. The supplied function is the action to be performed when the associated item is clicked. The element that triggered the current menu is passed to this handler as the first parameter. 
Note: This behaviour has changed from r1 where you needed a "#" before the id

menuStyle

An object containing styleName:value pairs for styling the containing <ul> menu.

itemStyle

An object containing styleName:value pairs for styling the <li> elements.

itemHoverStyle

An object containing styleName:value pairs for styling the hover behaviour of <li> elements.

shadow

Boolean: display a basic drop shadow on the menu. 
Defaults to true

eventPosX

Allows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientX". 
Defaults to: 'pageX'

eventPosY

Allows you to define which click event is used to determine where to place the menu. There are possibly times (particularly in IE6) where you will need to set this to "clientY". 
Defaults to: 'pageY'

onContextMenu( event)

A custom event function which runs before the context menu is displayed. If the function returns false the menu is not displayed. This allows you to attach the context menu to a large block element (or the entire document) and then filter on right click whether or not the context menu should be shown.

onShowMenu( event,  menu)

A custom event function which runs before the menu is displayed. It is passed a reference to the menu element and allows you to manipulate the output before the menu is shown. This allows you to hide/show options or anything else you can think of before showing the context menu to the user. This function must return the menu.

Changing defaults

In addition to passing style information for each menu via the settings object, you can extend the default options for all menus by calling $.contextMenu.defaults(settings). Every setting except bindings can be used as a default. 
Example:

  $.contextMenu.defaults({

    menuStyle : {

      border : "2px solid green"

    },

    shadow: false,

    onContextMenu: function(e) {

      alert('Did someone asked for a context menu?!');

    }

  });

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;

      }

    });

  

Notes

It is worth noting that by overriding the browser's right click menu this plugin provides a behaviour that is different from what most users will expect. This plugin may be best suited for intranet web applications, where the developer is working in a more controlled environment.

Credits

• A big thanks to John Resig for creating jQuery, and to the excellent development team who continues to make this the best javascript library in town.
• Thanks also to Joern Zaefferer - his Tooltip plugin provided great insight and inspiration.
• Dan G. Switzer, II, for his contributions