写第一个jquery插件实录

插件的功能很简单,就只是点击一个图片,图片在弹出框出现,后面有个背景层。由于CSS,HTML的各种基础都一般,学js刚14天,所以写这个还是花了点时间。

首先是结构,img文件夹里放需要的图片。index.html除了引用需要的js文件以及css文件之外,还需要写入图片的html代码。

<a href="img/caicai.jpg" title="Ashida1" class="thumbnail"><img src="img/caicai.jpg"/></a>

main.js里写调用插件的代码:

$(document).ready(function(){
    $(".thumbnail").otBox({
    });
});

这里所有thumbnail类都能调用otBox方法,于是要定义otBox方法,而且要把otBox方法定义在jQuery的原型中,这样所有的jQuery实例都能使用。所以otBox.js里面有$.fn.otBox = function(options){}的方法,详细如下:

    $.fn.otBox = function(options){
        var $this = this;
        var options = $.extend({},$.fn.otBox.defaults,options);

        $this.each(function(){

            Object.create(otBox).init($(this),options);
        });
    };
 

这里的$this指的是调用这个插件的由选择器选择出来的对象数组,比如在main里使用$(".thumbnail")选择了所有这个类的<a>元素,对于每一个<a>,都能进行插件的功能。于是在$.fn.otBox函数里,对数组里的每一个对象都进行了插件功能的初始化。初始化的时候需要将调用otBox的jQuery实例传入,即每一个<a>元素,也就是each里面的this,用$()封装成jQuery。由于在$(".thumbnail").otBox({});中,所有选择出来的元素享用同一组options参数(有默认参数,用户也可以自己传参),因此在each前就可以对options进行统一合并。使用jQuery中的extend方法,将$.fn.otBox.defaults(默认)和options(用户传入)一起合并到{}里面,传给var options。

Object.create(object)方法生成一个object的实例方法,它的内部like this:

        Object.create = function (pro){
            function F(){};
            F.prototype = pro;
            return new F();
        }

init是otBox的初始化函数。现在我们来看看otBox对象的定义:

    var otBox = {
        init:function(instance,options){
            this.instance=instance;//instance指的是调用otBox的jQuery实例,而this是otBox实例
            this.options=options;
            var $this=this;

//            生成bg和showbox的html部分
            var $showBox= $("<div class=‘show_box‘><img src=‘‘ alt=‘‘/></div><div class=‘bg_lock‘></div>");
            $(‘body‘).append($showBox);


            this.instance.on(‘click‘,function(e){
                e.preventDefault();
//                console.log(this); 
                $this.showBg();
                $this.showBox(this[‘href‘]);
            });

            $(‘.bg_lock‘).click(function(){
                $this.hideBox();
                $this.hideBg();
            });

        },
        showBg: function(){
            $(‘.bg_lock‘).show();
        },
        showBox: function(url){
            $(‘.show_box>img‘).attr(‘src‘,url);
            $(‘.show_box‘).show();
        },
        hideBg:function(){
            $(‘.bg_lock‘).hide();
        },
        hideBox:function(){
            $(‘.show_box>img‘).attr(‘src‘,‘‘);
            $(‘.show_box‘).hide();
        }
    };

主要是init部分,这里之所以要传入之前调用otBox的jQuery实例,是因为在init里面会绑定对实例的click方法,于是需要知道是哪个<a>被click了,弹出对应的图片。而在init里面的this指的是otBox实例。先在init里面在把弹出层和背景层的html动态添加到页面中,因为总不能让用户手动来填这部分html代码吧。然后,定义click事件,绑定在调用otBox的那个jQuery实例上,也就是传进来的instance。首先防止默认行为,也就是对a的跳转,然后分别show背景和弹出层,在弹出层的时候,把所需图片的url传入。在这个事件绑定函数中,由于this变成了click绑定的dom对象,也就是<a>元素,于是直接使用this[‘href‘]就可以取出图片的url。而showBg()等函数都需要otBox实例才能调用,所以用的是$this。

其余函数只是为了实现弹出层和背景层的出现和消失。

附上otBox的css文件,里面有关于弹出层和背景图的基本css实现:

a.thumbnail img{
    width:200px;

}

.bg_lock{
    display: none;
    height:100%;
    width: 100%;
    position:absolute;
    top:0%;
    left:0%;
    background-color: black;
    z-index:1000;
    opacity: 0.5;
}

.show_box{
    position: absolute;
    top: 10%;
    left: 25%;
    width:50%;
    z-index: 1001;


}

.show_box>img{
    width:100%;
    border-radius: 12px;
}
otBox.css

哇!最后展示下我的小菜菜!

 

附上otBox.js文件

/**
 * Created by OT on 14-1-6.
 */
(function ($){

    if( typeof Object.create !== ‘function‘){
        Object.create = function (pro){
            function F(){};
            F.prototype = pro;
            return new F();
        }
    };

    var otBox = {
        init:function(instance,options){
            this.instance=instance;//instance指的是调用otBox的jQuery实例,而this是otBox实例
            this.options=options;
            var $this=this;

//            生成bg和showbox的html部分
            var $showBox= $("<div class=‘show_box‘><img src=‘‘ alt=‘‘/></div><div class=‘bg_lock‘></div>");
            $(‘body‘).append($showBox);

            this.instance.on(‘click‘,function(e){
                e.preventDefault();
                $this.showBg();
                $this.showBox(this[‘href‘]);
            });

            $(‘.bg_lock‘).click(function(){
                $this.hideBox();
                $this.hideBg();
            });

        },
        showBg: function(){
            $(‘.bg_lock‘).show();
        },
        showBox: function(url){
            $(‘.show_box>img‘).attr(‘src‘,url);
            $(‘.show_box‘).show();
        },
        hideBg:function(){
            $(‘.bg_lock‘).hide();
        },
        hideBox:function(){
            $(‘.show_box>img‘).attr(‘src‘,‘‘);
            $(‘.show_box‘).hide();
        }
    };

    $.fn.otBox = function(options){
        var $this = this;
        var options = $.extend({},$.fn.otBox.defaults,options);

        $this.each(function(){

            Object.create(otBox).init($(this),options);
        });
    };

    $.fn.otBox.defaults = {};

})(jQuery);
otBox.js

这里首先是自执行函数,为了避免污染全局,所以用函数封装,为了让里面的代码执行一遍,于是把函数设成自执行,之所以要传jQuery进去,是怕有其他地方也有定义$,所以为了确保在otBox文件中使用的$就是jQuery,传了这个参数进去。函数里面第一部分是由于可能低版本的jQuery还不支持Object.create(),所以手动定义一下。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。