编写自己的jQuery提示框（Tip）插件

对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插件满天飞，之前是我想复杂了，总觉得写插件是很高深的事情，不知道有没有同感的同学。

 

使用方法其他jquery没什么不同：

代码如下:

$(function(){
    var t = $(".weixin").tip({
        title:'微信扫一扫',
        content:'<img src="img/weixin.jpg" width="160px" height="160px;">',
        html:true,
        direction:'bottom'
        });
    t.bind({
        mouver:function(){
            t.tip("show");   
        },
         mouseout:function() {
            t.tip("hide");
        }
    });
});

 

看一下可配置的选项吧

 

代码如下:

defaultoptions :{
            title : '',//标题
            content : '',//内容
            direction : 'bottom',//弹出反向，相对于选中元素
            html : false,//是否允许内容为html元素
            template : '<p class="tip"><p class="tip-inner"><h3></h3><p class="tip-container"></p></p></p>'//弹出框模版
        }

 

最后上高清无码有兴趣的看看，没兴趣的ctrl+c，ctrl+v吧

 

代码如下:

!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");
                //设置标题
                title.text(this.options.title);
                //设置内容
                if (this.options.html) {
                    container.html(this.options.content);
                } else {
                    container.text(this.options.content);
                }
                //添加tip到body
                $("body").append(this.tip);
                //计算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 : '<p class="tip"><p class="tip-inner"><h3></h3><p class="tip-container"></p></p></p>'
        }
    }
    $.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样式

 

代码如下:

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