jQuery 插件开发指南
那么首先我们来简单的看一下最正统的jQuery插件定义方式:
(function($){
$.fn.插件名=function(settings){
//默认参数
vardefaultSettings={
} /*合并默认参数和用户自定义参数*/
settings=$.extend(defaultSettings,settings);
returnthis.each(function(){ //代码 }); //插件在元素内多次出现
}})(jQuery);
先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):
(function($){
})(jQuery);
这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读【详谈JavaScript匿名函数及闭包】这篇文章。
jQuery的继承方法$.extend——$.extend在jQuery插件开发中有个很重要的作用,就是用于合并参数。
$.fn.tip=function(settings){
vardefaultSettings={
//颜色
color:'yellow',
//延迟
timeout:200 }
/*合并默认参数和用户自定义参数*/
settings=$.extend(defaultSettings,settings);
alert(settings.input);<br>}
jQuery插件定义第二种方式:
(function($){
//插件定义--更换名字
$.fn.tabpanel=function(method){
varmethods=$.fn.tabpanel.methods;
if(methods[method]){
returnmethods[method].apply(this,Array.prototype.slice.call(arguments,1));
}elseif(typeofmethod==='object'||!method){
returnmethods.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
} }
functionadd(p_options){
var_defaults={
id:""
}
<br>//内部实现略.........<br> return_index;
}
<br>})(jQuery);<br><br>调用 $("#team").tabpanel('add',"");
好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些