編寫自己的jQuery提示框（Tip）外掛程式_jquery

對jQuery相信很多同學和我一樣平時都是拿來主義，沒辦法，要怪只能怪jQuery太火了，各種插件基本能滿足平時的要求。但這畢竟不是長久之道，古人雲：「授之以魚，不如授之以漁」。

為了方便之前沒有接觸的同學，先來回顧一下jQuery的插件機制吧。

複製程式碼 程式碼如下:

//新增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();

其實jQuery的插件很簡單，怪不得jQuery插件滿天飛，之前是我想複雜了，總覺得寫插件是很高深的事情，不知道有沒有同感的同學。

動手之前先來做一下需求分析吧（ps：哥是學軟體工程出生的學費很坑爹啊，不搞搞需求分析對不起學費啊，呵呵）。

其實也沒啥好分析的就是做出以下效果：

滑鼠放上去的時候彈出微信掃一掃，微信太火了，老闆讓網站上放一個，所以哥寫了個插件滿足一下他，發工資就是上帝，給錢幹活，不要給我談節操，it宅男都是三觀盡毀，節操全無的。扯遠了。看效果圖吧。

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

複製程式碼 程式碼如下:

$(function(){
    var t = $(".weixin").Tip({
        title:'微信掃一掃',
        content:'',
        html:true,
        direction:'bottom'
        });
    t.bind({
        mouseover:function(){
            t.Tip("show");   
        },
         mouseout:function() {
            t.Tip("hide");
        }
    });
});

看一下可設定的選項吧

複製程式碼 程式碼如下:

defaultOptions :{
            title : '',//標題
            content : '',//內容物
            direction : 'bottom',//彈出反向，相對於選取元素
            html : false,//是否允許內容物為html元素
template : '

'//彈出框模版
        }

最後上高清無碼源碼有興趣的看看，沒興趣的ctrl c，ctrl v吧

複製程式碼 程式碼如下:

!函數($){
    var Tip = 函數(元素, 選項){
        this.init(元素, 選項);
    }
    Tip.prototype = {
        建構子：提示，
        init : 函數(元素, 選項){
            this.element = $(element);
            this.options = $.extend({},this.defaultOptions,options);
        },
        顯示：函數（）{
            if (!this.tip) {
                this.tip = this.getTip();
                var title = this.tip.find("h3"),
                    容器 = this.tip.find(".tip-container");
                //設定標題
                title.text(this.options.title);
                //設定內容
                if (this.options.html) {
                    container.html(this.options.content);
                } 其他 {
                    container.text(this.options.content);
                }
                //以body
                $("body").append(this.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,
                    頂，且
                    向左；
                開關(this.options.direction) {
                個案「上」：
                    上 = eTop - tiph;
                    left = (eLeft -tipw/2) eWidth/2;
                    this.tip.css({上方：頂部，左側：左側});
                    休息；
                個案「左」：
                    上方 = (eTop - Tiph/2) eHeight/2;
                    左 = eLeft -tipw;
                    this.tip.css({上方：頂部，左側：左側});
                    休息；
                個案「下」：
                    上方 = eTop eHeight;
                    left = (eLeft -tipw/2) eWidth/2;
                    this.tip.css({上方：頂部，左側：左側});
                    休息；
                個案「正確」：
                    上方 = (eTop - Tiph/2) eHeight/2;
                    left = eLeft eWidth;
                    this.tip.css({上方：頂部，左側：左側});
                    休息；
                預設值：
                    休息；
                }
            } 其他 {
                this.tip.css({display:'block'});
            }
        },
        隱藏：函數（）{
            this.getTip().css({display:"none"});
        },
        getTip : function() {
            回此.tip ? this.tip : $(this.options.template);
        },
        分離：函數（）{
        },
        預設選項：{
            標題：''，
            內容：''，
            方向 : '底部',
            html：假，
範本：'

;

'
        }
    }
    $.fn.Tip = 函數(選項) {
        回 this.each(function(){
            var e = $(this),
                data = e.data('提示'),
                options = typeof option == "object" && option;
            if (!data) e.data("tip", new Tip(this,options));
            if (typeof option == 'string') data[option]();
        });
    }
}(window.jQuery);

CSS 樣式

複製程式碼程式碼如下：

.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;
}

以上就是本文的所有內容了，小夥伴們對如何寫jQuery插件是否有了新的 認識了呢，希望大家能夠喜歡本文。