Tag: jquery

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

DEMO: http://sources.ikeepstudying.com/menu-mail-qq/   一、这是什么样的一个插件 我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,例如下图: 但是,浏览器默认的右键选项有时候并不是我们所需要的,我们希望浏览器的右键选项菜单更智能,可以灵活自定义。比较有代表性的就是web QQ,例如下面截图: QQ邮箱中也是有此功能。 显然这种东西貌似还是蛮强大与实用的,于是我就抽空写了个可以右键自定义上下文菜单的jQuery插件 – smartMenu,直接一行代码绑定,就可以让我们轻松实现页面元素的自定义上下文功能。至于具体如何实用与绑定,就是本文的的主要内容,也即是下文即 将介绍的内容。 二、插件效果、大小、使用等简介 效果 首先,肯定的,自定义的上下文菜单是右键右键某元素(或直接空白处)出现的,其UI风格我沿用了web QQ的相关样式(企鹅的视觉设计还是很赞的),支持分组以及多级菜单,如下效果截图: 为了使实现原理简单,代码精简,其二级菜单的一些交互细节与我们平时使用的软件的多级菜单是有差异的:例如dreamweaver软件,鼠标从二级 菜单上移出的时候,只要不经过一级菜单,整个二级菜单还是显示的;但是,这里的右键菜单,如果鼠标移出二级菜单,无论你是从哪个方向哪个位置移出,这个二… Read More

jQuery实现多条件筛选

我们在电商平台购买商品时,在商品列表页根据品牌、款式、价格范围等条件进行筛选查询,当点击某个条件时,在页面上会显示用户所选择的条件集合,并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。 查看演示下载源码 HTML 首先,我们将查询条件分类,在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。 <ul class="select"> <li class="select-list"> <dl id="select1"> <dt>上装:</dt>

实现数据库实时更新 jQuery Timers 编辑

精选名称:JQuery Timers 授权模式:WTFPL 官方网页:http://jquery.offput.ca/every/ 官方展示:http://jquery.offput.ca/every/ 底端 有时候必需定时做一个动作,像是每n秒透过ajax发送讯息伺服器,取得更新资讯。 一般的方式是使用Javascript的原生计时器函式 clearInterval、clearTimeout、setInterval、setTimeout, 不过原生函式在使用上不太直觉,而且无法快速的 指定套用在某个特定的网页元素, 另外他的间隔单位是以毫秒去计算(1秒=1000毫秒),嗯…我想要每5分钟做一次, 那我要设 定…60*60*1000=3600000秒…对吧?还是360000秒? 这时候快从哆啦B梦口袋拿出了JQuery Timers这个法宝就能解决这麻烦的问题。 JQuery Timers提供了三个函式… Read More

jquery 特效专辑

提示框弹窗类 Facebox Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面 。 Facebox SimpleModal SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。 SimpleModal jTip jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。 jTip BetterTip 一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。 BetterTip clueTip clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。 clueTip… Read More