jquery插件 - 学习笔记 （插件参数及函数的调用）

今天研究的是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插件的同学们应该不难理解，就不过多解释了（其实我懒）