html5气泡提示效果,基于jquery的气泡提示效果

  • Post author:
  • Post category:其他


代码注释已经尽可能的详细了,也不多说了.

初步测试暂未发现大的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){