欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu

发布于 2012-06-17  
jquery教程

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

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

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片1
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片1

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

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片2
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片2

QQ邮箱中也是有此功能。

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

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

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

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片3
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片3

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

大小
这个插件的功能看上去很带感,但是实际上其大小很小,非压缩版本4~5K的样子,YUIcompressor压缩后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>

注意:smartMenu插件需要jQuery1.4+以上版本支持,暂不向下兼容。

插件的方法名是smartMenu,顾名思意“聪明的菜单”,其实当初想命名为”contextMenu”,但是考虑到这个名字不好记,而易于同类插件命名冲突,于是就取了个相对本土化,草根化的名字”smartMenu”。加上参数使用为:包装器.smartMenu(data,options)。其中参数data是必须的,这个参数包含了右键显示的文字内容,以及相关的方法,具体数据格式下面会详细介绍;参数options可选,相关API下面会具体展示。
先举个超简单的使用实例吧:

$("#test").smartMenu(data);

上面一行代码实现的效果就是右键页面上id为test的元素后,会按照data参数提供的数据内容显示相应的右键上下文菜单。

三、资源下载以及demo演示

如果您想直接下载脚本文件,可以狠狠地点击这里:jquery-smartMenu.js(右键 – [目标|链接]另存为),压缩mini版本为:jquery-smartMenu-min.js

或者您可以下载附带demo的打包的zip源文件:jquery-smartMenu.zip

demo实例
本文提供两个demo实例页面。
您可以狠狠地点击这里:jQuery smartMenu插件处理图片demo

这个demo页面的自定义右键菜单主要绑定在了张含韵小姐年轻时候的图片上,右键图片,你会发现我们可以对图片样式进行设置,比方说,边框啦,内边距啦,或者是背景色啦。例如,我们来个5像素深灰蓝描边:

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片4
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片4

点击菜单后图片边缘就长成这个样子了:

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片5
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片5

另外该页面点击空白还会出现类似下面的效果:

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片6
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片6

这个是绑在body标签上的自定义右键菜单,其作用纯测试:冒泡的处理是否正确;最大文字个数限制等。

关于另外一个demo页面,您可以狠狠地点击这里:jQuery smartMenu插件与QQ邮箱功能demo

这个demo页面也是本文打包的zip源文件中的demo页面,是模仿QQ邮箱收件箱邮件列表上下文菜单交互效果的一个实例页面,其长相大致如下:

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片7
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片7

这个demo页面交互相对复杂些,因为其右键出现的菜单是随着选择的列表不同而有所差异的,这种差异主要体现在“标记为已读”和“标记为未读”上。
邮件列表如果全部是未读状态,则右键菜单会显示“标记为已读”,反之则显示“标记为未读”,如混杂则“标记为已读”和“标记为未读”同时显示,如下系列截图所示:

jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片8
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片8
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片9
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片9
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片10
jQuery 右键菜单,jQuery上下文菜单插件-smartMenu-图片10

零度科技原文链接:http://www.ldisp.com/a/jquery/2012/1273.shtml

上一篇:jquery禁用右键、文本选择功能、复制按键的实现
下一篇:40个jQuery下拉菜单插件(CSS下拉菜单)

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

141

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理