写第一个jquery插件实录

浏览数：16 / 时间：2015年06月09日

插件的功能很简单，就只是点击一个图片，图片在弹出框出现，后面有个背景层。由于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(),所以手动定义一下。

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

写第一个jquery插件实录