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	""	字符串。上下文菜单的名称，用以区分不同的上下文菜单。如果页面只有一个上下文菜单，此参数可缺省；如果是多个菜单，此参数必须，否则菜单会出现冲突。
offsetX	2	数值。上下文菜单左上角距离鼠标水平偏移距离。
offsetY	2	数值。上下文菜单左上角距离鼠标垂直偏移距离。
textLimit	6	数值。上下文菜单项限制显示的文字个数。如果超出会截取，并以…补全，完成文字以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的作者！