快捷導(dǎo)航

編寫自己的jQuery提示框（Tip）插件

更新時(shí)間：2015年02月05日 09:32:49 投稿：hebedich

這篇文章主要介紹了編寫自己的jQuery提示框（Tip）插件的方法,需要的朋友可以參考下

對(duì)jQuery相信很多同學(xué)和我一樣平時(shí)都是拿來(lái)主義，沒辦法，要怪只能怪jQuery太火了，各種插件基本能滿足平時(shí)的要求。但是這畢竟不是長(zhǎng)久之道，古人云：“授之以魚，不如授之以漁”。

為了方便之前沒有接觸的同學(xué)，先來(lái)回顧一下jQuery的插件機(jī)制吧。

復(fù)制代碼代碼如下:

//添加check和uncheck插件

jQuery.fn.extend({

  check: function() {

    return this.each(function() { this.checked = true; });

  },

  uncheck: function() {

    return this.each(function() { this.checked = false; });

  }

});

//插件的使用

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

其實(shí)jQuery的插件非常簡(jiǎn)單，怪不得jQuery插件滿天飛，之前是我想復(fù)雜了，總覺得寫插件是很高深的事情，不知道有沒有同感的同學(xué)。

動(dòng)手之前先來(lái)做一下需求分析吧（ps：哥是學(xué)軟件工程出生的學(xué)費(fèi)很坑爹啊，不搞搞需求分析對(duì)不起學(xué)費(fèi)啊，呵呵）。

其實(shí)也沒啥好分析的就是做出如下效果：

鼠標(biāo)放上去的時(shí)候彈出微信掃一掃，微信太火了，老板讓網(wǎng)站上放一個(gè)，所以哥寫了個(gè)插件滿足一下他，發(fā)工資就是上帝，給錢干活，不要給我談節(jié)操，it宅男都是三觀盡毀，節(jié)操全無(wú)的。扯遠(yuǎn)了?？葱Ч麍D吧。

使用方法其他jQuery沒什么不同：

復(fù)制代碼代碼如下:

$(function(){

    var t = $(".weixin").Tip({

        title:'微信掃一掃',

        content:'<img src="img/weixin.jpg" width="160px" height="160px;">',

        html:true,

        direction:'bottom'

        });

    t.bind({

        mouseover:function(){

            t.Tip("show");    

        },

         mouseout:function() {

            t.Tip("hide");

        }

    });

});

看一下可配置的選項(xiàng)吧

復(fù)制代碼代碼如下:

defaultOptions :{

            title : '',//標(biāo)題

            content : '',//內(nèi)容

            direction : 'bottom',//彈出反向，相對(duì)于選中元素

            html : false,//是否允許內(nèi)容為html元素

            template : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'//彈出框模版

        }

最后上高清無(wú)碼源碼有興趣的看看，沒興趣的ctrl+c，ctrl+v吧

復(fù)制代碼代碼如下:

!function($){

    var Tip = function(element, options){

        this.init(element, options);

    }

    Tip.prototype = {

        constructor : Tip,

        init : function(element, options){

            this.element = $(element);

            this.options = $.extend({},this.defaultOptions,options);

        },

        show : function() {

            if (!this.tip) {

                this.tip = this.getTip();

                var title = this.tip.find("h3"),

                    container = this.tip.find(".tip-container");

                //設(shè)置標(biāo)題

                title.text(this.options.title);

                //設(shè)置內(nèi)容

                if (this.options.html) {

                    container.html(this.options.content);

                } else {

                    container.text(this.options.content);

                }

                //添加tip到body

                $("body").append(this.tip);

                //計(jì)算tip的位置

                var eLeft = this.element.offset().left,

                    eTop = this.element.offset().top,

                    eWidth = this.element.innerWidth(),

                    eHeight = this.element.innerHeight(),

                    tipw = this.tip[0].offsetWidth,

                    tiph = this.tip[0].offsetHeight,

                    top,

                    left;

                switch(this.options.direction) {

                case 'top' :

                    top = eTop - tiph;

                    left = (eLeft - tipw/2) + eWidth/2;

                    this.tip.css({top: top, left: left});

                    break;

                case 'left' :

                    top = (eTop - tiph/2) + eHeight/2;

                    left = eLeft - tipw;

                    this.tip.css({top: top, left: left});

                    break;

                case 'bottom' :

                    top = eTop + eHeight;

                    left = (eLeft - tipw/2) + eWidth/2;

                    this.tip.css({top: top, left: left});

                    break;

                case 'right' :

                    top = (eTop - tiph/2) + eHeight/2;

                    left = eLeft + eWidth;

                    this.tip.css({top: top, left: left});

                    break;

                default:

                    break;

                }

            } else {

                this.tip.css({display:'block'});

            }

        },

        hide : function() {

            this.getTip().css({display:"none"});

        },

        getTip : function() {

            return this.tip ? this.tip : $(this.options.template);

        },

        detach : function() {

        },

        defaultOptions :{

            title : '',

            content : '',

            direction : 'bottom',

            html : false,

            template : '<div class="tip"><div class="tip-inner"><h3></h3><div class="tip-container"></div></div></div>'

        }

    }

    $.fn.Tip = function(option) {

        return this.each(function(){

            var e = $(this),

                data = e.data('tip'),

                options = typeof option == "object" && option;

            if (!data) e.data("tip", new Tip(this,options));

            if (typeof option == 'string') data[option]();

        });

    }

}(window.jQuery);

css樣式

復(fù)制代碼代碼如下:

.tip {

  position: absolute;

  padding: 3px;

  background: #efefef;

  border-radius: 2px;

  top: 0px;

  left: 0px;

}

.tip .tip-inner {

  background: #fafafb;

  border: 1px solid #d8d8d8;

}

.tip .tip-inner h3 {

  font-size: 14px;

  padding: 5px;

  border-bottom: 1px solid #eee;

}

.tip .tip-inner .tip-container {

  padding: 5px;

}