jquery-smartMenu鼠标反键菜单

核心文件：

<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-smartMenu.js"></script>

一、这是什么样的一个插件

我们都知道，默认状态下，我们右键web页面，会出现一个上下文菜单，例如下图：

这个插件能够做到鼠标反键，成上下文的菜单格式，效果图如下所示：

二、使用

此插件使用不需要任何图片资源，但是需要调用一段CSS样式，你可以在头部放入如下的一段CSS文件引入代码，脚本部分，显然，jQuery库以及插件脚本是少不了的，类似下面的调用：

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/smartMenu.css" type="text/css" /><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-smartMenu.js"></script>

三、smartMenu插件API参数详解

jQuery smartMenu插件API参数表
参数名默认值相关说明name""字符串。上下文菜单的名称，用以区分不同的上下文菜单。如果页面只有一个上下文菜单，此参数可缺省；如果是多个菜单，此参数必须，否则菜单会出现冲突。offsetX2数值。上下文菜单左上角距离鼠标水平偏移距离。offsetY2数值。上下文菜单左上角距离鼠标垂直偏移距离。textLimit6数值。上下文菜单项限制显示的文字个数。如果超出会截取，并以…补全，完成文字以title形式显示。beforeShow$.noop函数。菜单即将显示之前执行的回调函数。$.noop为jQuery 1.4+版本支持，所以，如果你想让插件向下兼容，可设置将插件js中所有的$.noop替换成function() {}afterShow$.noop函数。菜单显示后执行的回调函数。

一般情况下，上面的API参数用的比较多的就是name。第二个demo页面中用到了beforeShow这个API参数，用来在菜单显示之前改变data数据。

四、jQuery smartMenu插件样式、类名等

下表就是插件相关类名以及相对应的含义：

类名含义与作用smart_menu_box每一级菜单最外部容器，决定了容器的宽度以及层级，div标签smart_menu_body菜单的主体，决定了主体的背景色，边框色以及盒阴影效果，div标签smart_menu_ul菜单列表父容器，ul标签smart_menu_li每个菜单列表项，li标签smart_menu_li_separate分隔菜单组分隔线列表项，li标签smart_menu_a菜单列表项主体内容，响应方法，hover效果等，a标签smart_menu_triangle用来表示含多级菜单的三角，i标签smart_menu_a_hover菜单列表项主体内容hover状态样式，用来让多级菜单显示时保持父级菜单项保持hover状态，a标签smart_menu_li_hover菜单列表项经过时添加的类名，用来让子集菜单容器准确定位，li标签

上面API参数中提到一个常用的name参数，这个参数会以id名称应用到菜单最外部容器上，最外部容器id创建规则是："smartMenu_" + name，记住这个规则，这是比较重要的。因为这可以设置不同的右键菜单样式。

举个很简单的例子，我们有一个自定义的右键菜单内容，菜单里面显示的全部都是邮件地址列表，显然，CSS样式控制的140像素容器宽度是不够用的，但是，我们又不能修改smart_menu_box的宽度为200像素（比如），因为这会让所有的菜单宽度都是200像素。怎么办呢，这时候配合name值创建的容器id就发挥作用了，可以灵活定义特殊的上下文菜单的样式。

例如，这个邮件地址上下文菜单的name值是"email"，则我们可以通过以下样式控制其上下文菜单的宽度层级什么的，子元素当然也不在话下：

#smartMenu_email { width: 200px; }

id优先级高于class，所以，重置smart_menu_box默认的140像素宽度是绝对没有问题的。

另外，理论上，本插件支持无限层级的菜单。

五、扩展方法

除了API参数外，本插件还裸露了两个扩展方法，名称为：$.smartMenu.hide()和$.smartMenu.remove()，其中前者是隐藏右键菜单，后者是移除右键菜单。如果右键的显示的菜单是动态的，在菜单隐藏或是显示之前，一定要执行一下$.smartMenu.remove()方法，移除菜单内容。这样，每次右键的时候，插件根据新的data重建上下文菜单，否则，会直接显示页面上缓存的HTML上下文内容。

这在第二个demo页面，也就是QQ邮箱交互效果demo页面中就有$.smartMenu.remove()方法使用的痕迹。

最后感谢http://www.zhangxinxu.com/study/201105/jquery-plugin-smart-menu-demo.html的作者！