這幾天在學習jQuery插件的寫法，這裡自己總結了一下，並以一個具體的示例來說明jQuery插件的寫法。
1、概述
先看看html代碼
<ul id="catagory">
<li><a href="http:///menu/jquery/" target="_blank">jQuery</a></li>
<li><a href="http:///menu/aspnet/" target="_blank">Asp.net</a></li>
<li><a href="http:///menu/sqlserver/" target="_blank">Sql Server</a></li>
<li><a href="http:///menu/webqd/" target="_blank">CSS</a></li>
</ul>
比如我們要實現當光標移動到a標簽上時，a標簽向右移動一段距離，離開時a位置恢復。實現方法如下：
$(document).ready(function() {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
});
});
現在我們將這個方法進行擴展，寫成jQuery插件的形式，以後也能在別的項目中使用，並且可以方便的更改一些屬性值，現在我們來看看jQuery插件的寫法。
2、jQuery插件的結構
下邊這個結構應該是編寫jQuery插件的一個比較好的結構，我將原作者的一些注釋進行了相應的翻譯。
//為避免沖突，將我們的方法用一個匿名方法包裹起來
(function($) {
//擴展這個方法到jquery
$.fn.extend({
//插件名字
pluginname: function() {
//遍歷匹配元素的集合
return this.each(function() {
//在這裡編寫相應代碼進行處理
});
}
});
//傳遞jQuery到方法中，這樣我們可以使用任何javascript中的變量來代替"$"
})(jQuery);
3、實現jQuery插件
(function ($) {
$.fn.extend({
//插件名稱 - paddingList
paddingList: function (options) {
//參數和默認值
var defaults = {
animatePadding: 10,
hoverColor: "Black"
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
//將元素集合賦給變量 本例中是 ul對象
var obj = $(this);
//得到ul中的a對象
var items = $("li a", obj);
//添加hover()事件到a
items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false表示不添加到動畫隊列中
$(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
- Asp.net
- Sql Server
- CSS