tooltipプロンプトコントロール

ここ数日、会社のプロジェクトの改版で忙しくて、ここに文章を発表することはめったにありません.今日は週末の休みを利用して、jQueryのヒントコントロールを共有します.ロード・プロンプト、エラー・プロンプト、アクション・プロンプトなどを表示できます.
プレビューを先に表示:
プロンプトバースタイルは自分で定義することができ、コールバックとロックスクリーンを閉じることをサポートし、適応的に中央に位置し、fixed位置決めを採用する(互換性IE 6は考慮されていない).
 
以下はソースコードです:(注:このJSを導入する際にbody内に置いてください.そうしないと効果がありません.原因は不明です.)

/**

 * 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 fistInit = true;



    //       

    var tooltipWrap = $([

        '<div style="position: fixed; top:-100%; left: 50%; margin: 0; padding: 0; pointer-events: none; background: transparent;">',

        '   <div style="position: relative; top:0; right: 50%; margin: 0; padding: 0; pointer-events: visiblePainted;"></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);

            //        

            if (fistInit) {

                tooltipWrap.css('top', -tooltipWrap.height());

                fistInit = false;

            }

            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 (){

                t._slideUp();

            }, this.config.time);

        },

        //    

        close: function (){

            this._slideUp();

        }

    };



    //    

    window.tooltip = tooltip;

})(jQuery);

呼び出し方法(jQueryに依存し、各パラメータの意味注記にあり、あまり説明されていません):

tooltip({

    tip: '  ',

    lock: true,

    time: 6,

    afterClose: function(){

        alert('    ！');

    }

});