您好,欢迎访问一九零五行业门户网

jQuery 插件开发指南_jquery

那么首先我们来简单的看一下最正统的 jquery 插件定义方式:
复制代码 代码如下:
(function ($) {    
$.fn.插件名 = function (settings) {        
//默认参数        
var defaultsettings = {
}         /* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultsettings, settings);
return this.each(function () {             //代码         });   //插件在元素内多次出现
} })(jquery);
先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):
复制代码 代码如下:
(function ($) {
})(jquery);
这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈javascript 匿名函数及闭包】这篇文章。
jquery 的继承方法 $.extend —— $.extend 在jquery 插件开发中有个很重要的作用,就是用于合并参数。
复制代码 代码如下:
$.fn.tip = function (settings) {    
var defaultsettings = {           
//颜色    
color: 'yellow',       
//延迟       
timeout: 200     }
 /* 合并默认参数和用户自定义参数 */  
settings = $.extend(defaultsettings, settings);   
alert(settings.input);
}
jquery 插件定义第二种方式:
复制代码 代码如下:
(function ($) {
    //插件定义--更换名字
    $.fn.tabpanel = function (method) {
        var methods = $.fn.tabpanel.methods;
        if (methods[method]) {
            return methods[method].apply(this, array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
}
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: function (p_options) {
            tabpanelbind(p_options, this);
        },
        add: function (p_options) {
            addtab(p_options, this);
            tabpanelbind(p_options, this);
            // debugger
        }    }
    function add(p_options) {
        var _defaults = {
            id:
        }
//内部实现略.........
        return _index;
    }
})(jquery);
调用  $(#team).tabpanel('add',);
好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些
其它类似信息

推荐信息