【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

DEMO: http://sources.ikeepstudying.com/menu-mail-qq/

 

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

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

【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

但是，浏览器默认的右键选项有时候并不是我们所需要的，我们希望浏览器的右键选项菜单更智能，可以灵活自定义。比较有代表性的就是web QQ，例如下面截图：

【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

QQ邮箱中也是有此功能。

显 然这种东西貌似还是蛮强大与实用的，于是我就抽空写了个可以右键自定义上下文菜单的jQuery插件 – smartMenu，直接一行代码绑定，就可以让我们轻松实现页面元素的自定义上下文功能。至于具体如何实用

与绑定，就是本文的的主要内容，也即是下文即 将介绍的内容。

 

二、插件效果、大小、使用等简介

效果
首先，肯定的，自定义的上下文菜单是右键右键某元素（或直接空白处）出现的，其UI风格我沿用了web QQ的相关样式（企鹅的视觉设计还是很赞的），支持分组以及多级菜单，如下效果截图：

【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

为 了使实现原理简单，代码精简，其二级菜单的一些交互细节与我们平时使用的软件的多级菜单是有差异的：例如dreamweaver软件，鼠标从二级 菜单上移出的时候，只要不经过一级菜单，整个二级菜单还是显示的；但是，这里的右键菜单，如果鼠标移出二级菜单，无论你是从哪个方向哪个位置移出，这个二 级菜单都会隐藏。该差异您可以在下面展示的demo中细细体会。

 

大小
这个插件的功能看上去很带感，但是实际上其大小很小，非压缩版本4~5K的样子，YUI compressor压缩后2K出头，所以，该插件只能算是个实用的小插件而已。

 

使用
此插件使用不需要任何图片资源，但是需要调用一段CSS样式，你可以在头部放入如下的一段CSS文件引入代码：

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/smartMenu.css" type="text/css" />

 

 

脚本部分，显然，jQuery库以及插件脚本是少不了的，类似下面的调用：

<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>