右键菜单插件(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;
  }
});