tooltip提示控件

這些天忙於公司項目的改版就很少來這里發表文章了，今天趁着周末休息給大家分享一個jQuery提示控件。可用於顯示加載提示、錯誤提示、操作提示等。

先上張預覽圖：

提示條樣式可以自己定義，支持關閉回調和鎖屏，自適應居中，采用fixed定位（暫未考慮兼容IE6）。

下面是源碼：

/**
 * tooltip提示
 * @author Newton---承諾ン祗愛
 * @date 2012年04月19日晚
 * @update 2012年04月23日重構，保證一個實例的關閉函數只能觸發自身的關閉事件，加入動畫緩動支持。
 * @param object{}
 * @type string tip: '', 提示內容，支持傳入html。
 * @type number time: 3, 自動關閉時間，以秒計時。
 * @type boolean lock: false, 鎖屏。
 * @type string easing: 'linear' 動畫緩動效果，需要緩動插件支持。
 * @type string maskColor: '#000', 鎖屏顏色。
 * @type number maskOpacity: .3, 鎖屏透明度。
 * @type number fxSpeed: 300, 動畫速度，不建議設置過大，以毫秒計時。
 * @type number index: 999999,  z-index值。
 * @type function afterClose: $.noop 關閉后回調。
 */
(function ($){
    //提示條外層包裹
    var tooltipWrap = $([
        '
<div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0;">',
        '
<div style="position: relative; top:0; right: 50%; margin: 0; padding: 0;"></div>

',
        '</div>

'
    ].join('')).appendTo(document.body);

    //鎖屏
    var lockMask = $('
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none;"></div>

').appendTo(document.body);

    //內容包裹
    var tootipInner = tooltipWrap.children();

    //計時器id
    var timer = null;

    //實例堆棧
    var instanceStack = null;

    //默認參數
    var defaults = {
        tip: '',
        time: 3,
        fxSpeed: 300,
        index: 999999,
        lock: false,
        easing: 'linear',
        maskOpacity: .2,
        maskBackground: '#000',
        afterClose: $.noop
    };

    //接口
    var tooltip = function (config){
        //模仿靜態方法，不需要用new初始化
        if (!(this instanceof tooltip)) {
            return new tooltip(config);
        }
        this.config = $.extend({}, defaults, config);
        this.config.time = this.config.time * 1000;
        this._initialize();
        return this;
    };

    //原型方法
    tooltip.prototype = {
        //初始化函數
        _initialize: function (){
            clearTimeout(timer);
            if (instanceStack !== null && instanceStack !== this) instanceStack.config.afterClose();
            instanceStack = this;
            tooltipWrap.css('z-index', this.config.index);
            lockMask.css({
                zIndex: this.config.index - 1,
                opacity: this.config.maskOpacity,
                background: this.config.maskBackground
            });
            this._toggleMask();
            tootipInner.html(this.config.tip);
            this._slideDown();
        },
        //鎖屏
        _locked: function (){
            lockMask.fadeIn(this.config.fxSpeed);
        },
        //關閉鎖屏
        _unlocked: function (){
            lockMask.fadeOut(this.config.fxSpeed);
        },
        //顯示隱藏鎖屏
        _toggleMask: function (){
            if (this.config.lock) {
                this._locked();
            } else {
                this._unlocked();
            }
        },
        //提示條滑下
        _slideDown: function (){
            var t = this;
            tooltipWrap.stop(true, false).animate({
                top: 0
            }, this.config.fxSpeed, this.config.easing, function (){
                t._autoClose();
            });
        },
        //提示條收起
        _slideUp: function (){
            //保證只有當前實例才能執行關閉操作
            if (instanceStack !== this) return;
            var t = this;
            this._unlocked();
            tooltipWrap.animate({
                top: -tooltipWrap.height()
            }, this.config.fxSpeed, this.config.easing, function (){
                instanceStack = null;
                t.config.afterClose();
            });
        },
        //自動關閉
        _autoClose: function (){
            var t = this;
            timer = setTimeout(function (){
                clearTimeout(timer);
                t._slideUp();
            }, this.config.time);
        },
        //關閉接口
        close: function (){
            this._slideUp();
        }
    };

    //公開接口
    window.tooltip = tooltip;
})(jQuery);

調用方法（依賴jQuery，每個參數的意義注釋里都有，不多解釋了）：

tooltip({
    tip: '消息',
    lock: true,
    time: 6,
    afterClose: function(){
        alert('我關閉了！');
    }
});

更新日志： 2012年04月23日：詳細請見注釋。 示例下載： tooltip.rar（前端組-Newton）