写第一个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.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);
这里首先是自执行函数,为了避免污染全局,所以用函数封装,为了让里面的代码执行一遍,于是把函数设成自执行,之所以要传jQuery进去,是怕有其他地方也有定义$,所以为了确保在otBox文件中使用的$就是jQuery,传了这个参数进去。函数里面第一部分是由于可能低版本的jQuery还不支持Object.create(),所以手动定义一下。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。