右键菜单插件(ContextMenu plugin)

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

特性
一个页面可以使用多个菜单
菜单可以绑定到多种页面元素
自定义样式
指定菜单回调函数
当前版本
版本号 r2
发布日期 2007-7-16
作者 Chris Domigan (cdomigan@gmail.com)
贡献者 Dan G. Switzer, II
下载 源文件版本 (4.3 KB)
压缩文件版本 (2.5 KB)
类库需求 jQueryV1.1或更高
支持浏览器 Firefox 1.5+
Internet Explorer 6.0+

更新日志
版本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?!');
}
});