右键菜单插件(ContextMenu plugin)

右键菜单(ContextMenu)是一个轻量级的jquery插件，使用它你可以选择性的用自定义的右键菜单替换浏览器的右键菜单。

特性

• 一个页面可以使用多个菜单
• 菜单可以绑定到多种页面元素
• 自定义样式
• 指定菜单回调函数

当前版本

更新日志

• 版本2 - 2007-7-16
  • 可以正确使用默认参数
  • 增加 shadow, eventPosX, eventPosY,onContextMenu 和 onShowMenu 选项
  • 大部分修改由Dan G. Switzer, II完成
• 版本1 - 2007-3-9
  • 首次发布

使用方法

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

在HTML标签中定义菜单结构.对于每个菜单，在使用样式"contextMenu"的div标签中放置一些无序列表和你要调用的ID(参见例子). div标签可以放置在任意位置，它会被插件隐藏起来.
你可以在页面上定义任意多的菜单. 每个<li>标签会作为一个菜单选项. 为每个<li>标签分配一个唯一id，这样就可以为其绑定操作.
注意:菜单(ContextMenu)目前不支持嵌套菜单. 这个特性也许在以后的版本出现.

参数

菜单ID

菜单id是在菜单中定义的.可以将菜单绑定到一个或多个元素上.
例：$("table td").contextMenu("myMenu") 会将菜单绑定到id为"myMenu"的表格单元格中
注意: 版本1中，id前需要加上一个"#"

设置

菜单插件(ContextMenu)接收一个额外的参数对象来设置菜单项的样式和绑定鼠标事件. 菜单插件(ContextMenu)支持一下参数设置:

bindings

包含id的对象:函数组. 当关联的菜单项被点击时调用所提供的函数.触发当前菜单的元素作为第一个参数传递给函数.
注意: 版本1中，id前需要加上一个"#"

menuStyle

包含样式名的对象:装饰包含菜单的容器的名值对.

itemStyle

包含样式名的对象:装饰<li>标签的名值对.

itemHoverStyle

包含样式名的对象:装饰鼠标浮动到<li>上的效果.

shadow

布尔型:是否显示菜单下拉阴影.
默认为true

eventPosX

定义当鼠标点击时菜单的x轴位置.有时候(特别是在使用IE6时)设置为"clientX".
默认为'pageX'

eventPosY

定义当鼠标点击时菜单的y轴位置.有时候(特别是在使用IE6时)设置为"clientY".
默认为'pageY'

onContextMenu(event)

菜单显示前调用的自定义事件函数.如果函数返回false，菜单将不显示.该事件可实现在大块元素 (或整个页面)上绑定菜单，然后判断是否在右击时显示菜单

onShowMenu(event, menu)

菜单显示前调用的自定义事件函数.该事件传递一个参数在菜单显示前操作输出.在显示菜单前， 你可以通过该事件来显示、隐藏或其他你想要的任何操作. 该函数返回值必须是menu.

更改默认参数

除了通过参数对象来设置菜单样式外,你还可以通过调用$.contextMenu.defaults(settings) 来扩展默认参数.除bindings外每个设置都会用作默认参数.
例:

$.contextMenu.defaults({

	menuStyle : {

	  border : "2px solid green"

	},

	shadow: false,

	onContextMenu: function(e) {

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

	}		

});

		  

例子

例1 - 简单应用

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

        }

      }

    });

上述代码将菜单"myMenu1"绑定到样式为"demo1"的所有span元素上

例2 - 基本样式

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'

      }

    });

  

上述代码将菜单"myMenu2"绑定到id为"demo2"的元素上.

例3 - 带有回调函数的高级应用

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;

      }

    });