发布于 2017-04-12 00:26:43 | 129 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


这篇文章主要介绍了编写自己的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插件满天飞,之前是我想复杂了,总觉得写插件是很高深的事情,不知道有没有同感的同学。

动手之前先来做一下需求分析吧(ps:哥是学软件工程出生的学费很坑爹啊,不搞搞需求分析对不起学费啊,呵呵)。

其实也没啥好分析的就是做出如下效果:

鼠标放上去的时候弹出微信扫一扫,微信太火了,老板让网站上放一个,所以哥写了个插件满足一下他,发工资就是上帝,给钱干活,不要给我谈节操,it宅男都是三观尽毁,节操全无的。扯远了。看效果图吧。

使用方法其他jQuery没什么不同:



$(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");

        }

    });

});

看一下可配置的选项吧



defaultOptions :{

            title : '',//标题

            content : '',//内容

            direction : 'bottom',//弹出反向,相对于选中元素

            html : false,//是否允许内容为html元素

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

        }

最后上高清无码源码有兴趣的看看,没兴趣的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 : '<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样式



.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插件是否有了新的 认识了呢,希望大家能够喜欢本文。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务