基于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 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
javascript call方法使用说明
Jan 11 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
javascript数组排序汇总
Jul 07 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
详解创建自定义的Angular Schematics
Jun 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 mail to 配置详解
2014/01/16 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python模拟Django框架实例
2016/05/17 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python数据爬下来保存的位置
2020/02/17 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Python 随机按键模拟2小时
2020/12/30 Python
2015年幼儿园新年寄语
2014/12/08 职场文书
2014年优秀党员材料
2014/12/18 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
总经理岗位职责
2015/02/04 职场文书
原告离婚代理词
2015/05/23 职场文书
筑梦中国心得体会
2016/01/18 职场文书
辞职信怎么写?
2019/05/21 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python