今天研究的是jquery插件的基本写法:
比如我打算写一个名为ImageZoom 的插件
前台调用:
<script src="ImageZoom.js"></script>$.ImageZoom({ imageSelector: ".imgBox img", //图片选择器 wrapSelector: ".list-images", //层选择器 allowCustomeZoom: true, //允许手动缩放 speed: 300, callback: function () { alert(2); }})
ImageZoom.js内:
;(function (window, document) { 'use strict'; /*=========================== ImageZoom ===========================*/ $(function () { //进入插件 _init(); }); $.ImageZoom = function (options) { var s=this; var defaults={ imageSelector: null, //图片选择器 wrapSelector: null, //层选择器 allowCustomeZoom: true, //允许手动缩放 speed: 500, callback:function(){} //回调函数 }; var opts=$.extend({}, defaults, options); //继承默认参数,合并传进来的参数 $(opts.imageSelector).on('click',function(){ opts.callback(); //点击图片的时候,触发回调函数 }) } function _init(){ console.log('init'); }})(window, document);
模板世界(www.templatesy.com),分享最新、最全的网站模板
有一定基础,打算写js插件的同学们应该不难理解,就不过多解释了(其实我懒)
新闻热点
疑难解答