jQuery插件的写法分享
1、概述
先看看html代码
<ulid="catagory">
<li><ahref="#">jQuery</a></li>
<li><ahref="#">Asp.net</a></li>
<li><ahref="#">SqlServer</a></li>
<li><ahref="#">CSS</a></li>
</ul>
比如我们要实现当光标移动到a标签上时，a标签向右移动一段距离，离开时a位置恢复。实现方法如下：
$(document).ready(function(){
$("#catagorya").hover(function(){
$(this).animate({paddingLeft:"20px"},{queue:false,duration:500});
},function(){
$(this).animate({paddingLeft:"0"},{queue:true,duration:500});
});
});
现在我们将这个方法进行扩展，写成jQuery插件的形式，以后也能在别的项目中使用，并且可以方便的更改一些属性值，现在我们来看看jQuery插件的写法。
2、jQuery插件的结构
下边这个结构应该是编写jQuery插件的一个比较好的结构，我将原作者的一些注释进行了相应的翻译。
接下来，我们给插件中加入一些可以改变的属性，这样用户可以根据自己的需要来做一些更改。同时，我们应提供相应的默认值。 3、实现jQuery插件 最后，使用插件的方法如下：
//为避免冲突，将我们的方法用一个匿名方法包裹起来
(function($){
//扩展这个方法到jquery
$.fn.extend({
//插件名字
pluginname:function(){
//遍历匹配元素的集合
returnthis.each(function(){
//在这里编写相应代码进行处理
});
}
});
//传递jQuery到方法中，这样我们可以使用任何javascript中的变量来代替"$"
})(jQuery);
(function($){
$.fn.extend({
//将可选择的变量传递给方法
pluginname:function(options){
//设置默认值并用逗号隔开
vardefaults={
padding:20,
mouseOverColor:"#000000",
mouseOutColor:"#ffffff"
}
varoptions= $.extend(defaults,options);
returnthis.each(function(){
varo=options;
//这里编写相应代码
//可以像下边这样获取变量值
alert(o.padding);
});
}
});
})(jQuery);
(function($){
$.fn.extend({
//插件名称-paddingList
paddingList:function(options){
//参数和默认值
vardefaults={
animatePadding:10,
hoverColor:"Black"
};
varoptions=$.extend(defaults,options);
returnthis.each(function(){
varo=options;
//将元素集合赋给变量本例中是ul对象
varobj=$(this);
//得到ul中的a对象
varitems=$("lia",obj);
//添加hover()事件到a
items.hover(function(){
$(this).css("color",o.hoverColor);
//queuefalse表示不添加到动画队列中
$(this).animate({paddingLeft:o.animatePadding},{queue:false,duration:300});
},function(){
$(this).css("color","");
$(this).animate({paddingLeft:"0"},{queue:true,duration:300});
});
});
}
});
})(jQuery);
//使用插件
$(document).ready(function(){
$("#catagory").paddingList({animatePadding:30,hoverColor:"Red"});
});
作者：朋友的你来源：jQuery学习
相关文章