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

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

今天研究的是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);