通过contextMenu生成自定义右键菜单

目的：

使用contextMenu生成自定义右键菜单

ContextMenu插件的作用

ContextMenu是一个轻量级的jQuery插件，它可以让你有选择性的覆盖浏览器的右键菜单，自定义你自己的右键菜单。

ContextMenu的特性

• 在同一个页面上可以使用多个右键菜单；
• 右键菜单可以被绑定到多个元素上；
• 完全可以自定义样式；
• 可以指定上下文回调函数；

当前版本

• 版本：r2
• 发布日期：16 July 2007
• 作者： Chris Domigan (cdomigan at gmail dot com)
• 贡献者： Dan G. Switzer, II
• 下载：Source js file（右键另存为）
• 需要条件： jQuery v1.1或更高版本
• 浏览器支持：IE6+ 或其他现代浏览器支持

变更日志

• 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

用法

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

在你的HTML页面中定义菜单结构。对每一个菜单，在一个class为contextMenu的DIV中放置一个无序列表，你需要在代码中指向这个contextMenu的ID(参见示例)。你可以把这个div放置在页面的任何位置，它会被插件自动隐藏。
你可以在一个页面中定义任意多个菜单，只要你喜欢。每一个<li>元素都是右键菜单的一个选项，给每个li定义一个唯一的id，从而能让每一个菜单项绑定一个操作。

注意:ContextMenu目前尚不支持嵌套菜单，这一特性也许会在下一个版本中添加。

参数说明

1.menu_id ：此参数用来指定你在页面中定义的菜单；你可以将多个元素绑定到菜单中。例如：$(“table td”).contextMenu(“myMenu”) ，这会把定义的id为myMenu的菜单绑定到所有的表格单元格上；

注意：相对于r1版本，r2版本中要求在id前添加一个“#” 。

2.settings: ContextMenu提供了一个可选设置对象从而使你能够自定义自己的菜单样式以及自定义每个选项的点击处理事件。在此设置对象中，ContextMenu提供了以下属性。
(1)bindings: 可以包含多个”id”:function 对，提供的函数是关联的菜单项被点击时引发的操作；id对应的菜单项触发的事件会交给这个函数处理。
(2)menuStyle: 包含样式名称：值 对，用来定义<ul>菜单的样式；
(3)itemStyle: 包含样式名称：值 对，用来定义<li>菜单的样式；
(4)itemHoverStyle: 包含样式名称：值 对，用来定义<li>元素鼠标悬停的效果；
(5)shadow： 设置在菜单下是否显示阴影，默认是true，即显示阴影
(6)eventPosX： 自定义哪一个单击事件用来决定显示菜单的横向位置，有时（尤其对于IE6）你需要将其设置成”clientX”，默认是”pageX”；
(7)eventPosY： 自定义哪一个单击事件用来决定显示菜单的纵向位置。有时（尤其对于IE6）你需要将其设置成”clientY”，默认是”pageX”；
(8)onContextMenu(event): 在菜单显示前的回调函数,如果该函数返回false，菜单便不会显示。这允许你将上下文菜单（即右键菜单）放置于一个大的块级元素（甚至是整个文档）中，然后在右键单击时通过过滤以决定上下文菜单是否显示；
(9)onShowMenu(event, menu): 在菜单显示前的回调函数，它传入菜单元素的引用，允许在菜单显示前控制输出，它使我们可以在显示菜单前隐藏、显示菜单项或者其他操作，这个函数必须返回menu；

更改默认值

除了setting可以对每个菜单项更改样式，还可以通过调用$.contextMenu.defaults(settings)扩展所有菜单的default选项，除了bindings属性，其他的每一个都将其作为默认值。例如：

$.contextMenu.defaults({
    menuStyle : {
         border : "2px solid green"
        },
        shadow: false,
        onContextMenu: function(e) {
            alert('Did someone asked for a context menu?!');
        }
});

示例

示例代码打包地址：[点击这里开始下载代码]。

参考文档
1. http://www.trendskitchens.co.nz/jquery/contextmenu/;(官方说明)
2. http://blog.csdn.net/zzq900503/article/details/12709303;
3. http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html