基于jquery的气泡提示效果


Posted in Javascript onMay 31, 2010

代码注释已经尽可能的详细了,也不多说了.
初步测试暂未发现大的BUG,总体来说不满意的是鼠标移来移去不断触发气泡时会出现XX为空或不是对象的问题,
虽然不影响效果,但看着IE左下角的黄色警告不爽,暂时不知道如何改进. 加了try/catch解决...
还有就是气泡默认出现在触发对象的正上方,当触发对象在边上时,气泡会有一部分出现在窗口外面......也许这种情况可以让气泡显示在左边或是右边,感觉可能会有些麻烦,就没去弄了,比较懒......
越用jquery就越喜欢用它...
bubble.js:

/* 
* @date: 2010-5-30 11:57:22 
* @author: 胡灵伟 
* Depends: 
* jquery.js 
* 
* function:气泡提示效果 
* use:$("selectors").bubble({fn:getdata, width:width, height:height}); 
* 对所有需要气泡提示效果的对象使用bubble方法, 
* fn为气泡中显示内容获得方法,即fn中返回的数据会显示在气泡中 
* 以样式指代div则有: 
* width\height为contents的width\height属性 
* 气泡总width为left.width + contents.width + right.width 
* 气泡总height为top.height + contents.height + bottom.height 
*/ 
(function ($) { 
$.fn.bubble = function (options) { 
Bubble = function(){ 
this.defaults = { 
distance : 10, 
time : 250, 
hideDelay : 500, 
width:100, 
height:100 
}; 
this.options = $.extend(this.defaults, options); 
this.hideDelayTimer = new Array(); 
this.shown = new Array(); 
this.beingShown = new Array(); 
this.popup = new Array(); 
this.trigger = new Array(); 
this.makebubble = function(w, h){ 
var tpl = $('<div class="bubble-popup"></div>').append('<div class="topleft"></div>').append('<div class="top"></div>') 
.append($('<div class="topright"></div>')).append('<div class="left"></div>') 
.append('<div class="contents"></div>').append('<div class="right"></div>') 
.append('<div class="bottomleft"></div>') 
.append($('<div class="bottom"></div>') 
.append($('<div class="bottomtail"></div>'))) 
.append('<div class="bottomright"></div>').appendTo('body'); 
tpl.find('.left, .right, .contents').each(function(){$(this).height(h)}); 
tpl.find('.top, .bottom, .contents').each(function(){$(this).width(w)}); 
return tpl; 
}; 
this.add = function(triggers, options){ 
//此处的options为每次调用add方法传进来的参数,比如指定获取数据的方法fn, 气泡宽width高height 
//console.debug("length:"+triggers.length); 
var t = this.trigger.length; 
//将新加入的需要气泡提示效果的对象放到trigger数组中 
for(var j =0;j<triggers.length;j++) 
this.trigger.push(triggers[j]); 
//console.debug("trigger.length:" + this.trigger.length); 
var hout = this.handleout; 
var hover = this.handleover; 
var obj = this; 
//为新加入的对象绑定鼠标监听事件 
triggers.each(function(ind){ 
$(this).unbind('mouseover').mouseover(function(){ 
hover(t + ind, obj, options); 
}).unbind('mouseout').mouseout(function(){ 
hout(t + ind, obj, options); 
}); 
}); 
}; 
this.handleover = function(i, obj, options){ 
//console.debug("hideDelayTimer.length:" + obj.hideDelayTimer.length); 
//当新触发冒气泡事件时原先的定时器还没结束则将原来的定时器清除 
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]); 
if (obj.beingShown[i] || obj.shown[i]) { 
//如果气泡正在冒或已经冒出来了则不再重复冒气泡 
return; 
} else { 
var trigger = $(obj.trigger[i]); 
//标记正在冒气泡 
obj.beingShown[i] = true; 
//创建气泡 
obj.popup[i] = obj.makebubble(options.width||obj.options.width, options.height||obj.options.height); 
//对于气泡绑定同样的事件以使得鼠标离开触发对象后放到气泡上时气泡不会消失 
obj.popup[i].mouseover(function(){obj.handleover(i, obj)}).mouseout(function(){obj.handleout(i, obj)}); 
//调用获取数据的方法fn来显示数据 
obj.options.fn(obj.trigger[i], function(data){ 
obj.popup[i].find('.contents').text(data); 
}); 
//设定气泡的位置和显示属性,气泡默认出现在触发对象正上方 
obj.popup[i].css({ 
top: trigger.offset().top-obj.popup[i].height(), 
left: trigger.offset().left + trigger.width()/2 - obj.popup[i].width()/2, 
display: 'block' 
}).animate( 
//由于万恶的IE不能同时支持PNG半透明和滤镜,所以对于IE不使用滤镜 
$.browser.msie?{ 
top: '-=' + obj.options.distance + 'px' 
}:{ 
top: '-=' + obj.options.distance + 'px', 
opacity: 1 
}, obj.options.time, 'swing', function() { 
obj.beingShown[i] = false; 
obj.shown[i] = true; 
}); 
} 
return false; 
}; 
this.handleout = function(i, obj, options){ 
//console.debug("hideDelayTimer["+i+"]:"+obj.hideDelayTimer[i]); 
//处理当因为某些意外操作使得没有触发鼠标进入事件而直接再次触发鼠标离开事件时的情况 
if (obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]); 
obj.hideDelayTimer[i] = setTimeout(function () { 
obj.hideDelayTimer[i] = null; 
try{ 



 obj.popup[i].animate( 
$.browser.msie?{ 
top: '-=' + obj.options.distance + 'px' 
}:{ 
top: '-=' + obj.options.distance + 'px', 
opacity: 0//渐隐效果 
}, obj.options.time, 'swing', function () { 
obj.shown[i] = false; 
obj.popup[i].css('display', 'none'); 
obj.popup[i] = null; 
});}catch(e){}; 
}, obj.options.hideDelay); 
return false; 
}; 
}; 
$.bubble = new Bubble();//单例 
$.bubble.add(this, options); 
}; 
})(jQuery);

使用方法:(用到的图片样式img.zip,注意路径,没图片是很难看的...)
<style type="text/css" media="screen"> 
<!-- 
* { 
margin: 0; 
padding: 0; 
} 
body { 
padding: 10px; 
} 
h1 { 
margin: 14px 0; 
font-family: 'Trebuchet MS', Helvetica; 
} 
.bubbletrigger { 
} 
/* Bubble pop-up */ 
.bubble-popup { 
position: absolute; 
display: none; 
z-index: 50; 
border-collapse: collapse; 
} 
.bubble-popup .topleft {width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-1.png);} 
.bubble-popup .top { width:1px;height:15px;float:left;background-image: url(../images/bubble/bubble-2.png); } 
.bubble-popup .topright { width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-3.png); } 
.bubble-popup .left { clear:left;width:19px; height:1px;float:left;background-image: url(../images/bubble/bubble-4.png); } 
.bubble-popup .contents { 
white-space:normal; 
word-break:break-all; 
float:left; 
font-size: 12px; 
line-height: 1.2em; 
background-color: #fff; 
color: #666; 
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; 
} 
.bubble-popup .right { width:19px; height:1px;float:left;background-image: url(../images/bubble/bubble-5.png); } 
.bubble-popup .bottomleft { clear:left;width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-6.png); } 
.bubble-popup .bottom {width:1px;height:15px;float:left;background-image: url(../images/bubble/bubble-7.png); text-align: center;} 
.bubble-popup .bottomtail { width:30px; height:29px; display: block; margin: 0 auto; background-image: url(../images/bubble/bubble-tail2.png);} 
.bubble-popup .bottomright { width:19px; height:15px;float:left;background-image: url(../images/bubble/bubble-8.png); } 
--> 
</style> 
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="../js/bubble-1.0.js" type="text/javascript"></script> 
<script type="text/javascript"><!-- 
aa = function(obj, callback){ 
$.ajax({ 
type : 'POST', 
data : {word:$(obj).attr('alt'),rand:Math.random()}, 
url : 'http://localhost/xun/ajax.svl?method=getdetailinfo', 
dataType : 'text', 
timeout : 1000, 
success : function(data){ 
callback(data); 
} 
}); 
}; 
bb = function(obj, callback){ 
$.ajax({ 
type : 'POST', 
data : {word:$(obj).attr('alt'),rand:Math.random()}, 
url : 'http://localhost/xun/ajax.svl?method=getdetailinfo', 
dataType : 'text', 
timeout : 1000, 
success : function(data){ 
callback(data + "aaaa"); 
} 
}); 
}; 
$(function(){ 
$('.bubbletrigger').bubble({width:150, height: 100, fn:aa}); 
$('#a').bubble({fn:bb}); 
}); 
// 
--></script> 
</head> 
<body id="page"> 
<h1>jQuery Bubble Example</h1> 
<div> 
<br/>aaaaaaaaaa 
<br/>aaaaaaaaaaaaaaaaaaaa 
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaa 
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
</div> 
<div style="padding-left:100px;"> 
<img class="bubbletrigger" alt="a" src="../images/bubble/starburst.gif" /> 
<img class="bubbletrigger" alt="b" src="../images/bubble/starburst.gif" /> 
<img class="bubbletrigger" alt="c" src="../images/bubble/starburst.gif" /> 
<img class="bubbletrigger" alt="d" src="../images/bubble/starburst.gif" /> 
<img id="a" alt="e" src="../images/bubble/starburst.gif" /> 
</div> 
</body>

servlet只要返回一段字符串就可以了,就不贴了.
Javascript 相关文章推荐
prototype Element学习笔记(篇一)
Oct 26 Javascript
Javascript 实用小技巧
Apr 07 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 #Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 #Javascript
jQuery 获取对象 定位子对象
May 31 #Javascript
jQuery 获取对象 基本选择与层级
May 31 #Javascript
javascript 判断数组是否已包含了某个元素的函数
May 30 #Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 #Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 #Javascript
You might like
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python range实例用法分享
2020/02/06 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
售房委托书
2014/08/30 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
技术支持岗位职责
2015/02/13 职场文书
个人专业技术总结
2015/03/05 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
python中的None与NULL用法说明
2021/05/25 Python
Python3 类型标注支持操作
2021/06/02 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
python中24小时制转换为12小时制的方法
2021/06/18 Python