首页 > 网站 > WEB开发 > 正文

jquery插件

2024-04-27 14:10:39
字体:
来源:转载
供稿:网友

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

  

  


上一篇:moble slider

下一篇:JavaScript String对象

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表