首页 > Web开发 > 详细

jquery插件 - 学习笔记 (插件参数及函数的调用)

时间:2015-04-18 12:48:22      阅读:201      评论:0      收藏:0      [点我收藏+]

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

 

  

  

jquery插件 - 学习笔记 (插件参数及函数的调用)

原文:http://www.cnblogs.com/w2xh/p/4437123.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!