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

Versionr2
Released16 July 2007
AuthorChris Domigan (cdomigan at gmail dot com)
ContributorsDan G. Switzer, II
DownloadSource js file (4.3 KB)
Compressed js file (2.5 KB)
RequiresjQuery v1.1 or greater
SupportsFirefox 1.5+
Internet Explorer 6.0+

Changelog

  • r2 - 16 July 2007
    • Defaults now correctly applied
    • Added shadoweventPosXeventPosYonContextMenu 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( eventmenu)
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值