1、概述
先看看html代碼
. 代碼如下:
<ul id="catagory">
<li><a href="#">jQuery</a></li>
<li><a href="#">Asp.net</a></li>
<li><a href="#">Sql Server</a></li>
<li><a href="#">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);
接下來，我們給插件中加入一些可以改變的屬性，這樣用戶可以根據自己的需要來做一些更改。同時，我們應提供相應的默認值。
. 代碼如下:
(function($){
$.fn.extend({
//將可選擇的變量傳遞給方法
pluginname: function(options) {
//設置默認值並用逗號隔開
var defaults = {
padding: 20,
mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
//這裡編寫相應代碼
//可以像下邊這樣獲取變量值
alert(o.padding);
});
}
});
})(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" });
});