DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 插件學習(五)
jquery 插件學習(五)
編輯:JQuery特效代碼     
這節封裝插件了,進展怎麼樣呢?

一般對外發布的插件都應該進行封裝,封裝的插件還應該符合規范,只有這樣寫的插件才具有推廣價值,並得到其他用戶的喜愛。

首先第一步,是定義一個獨立域,代碼如下所示。
. 代碼如下:
(function($){
//自定義插件代碼
})(jQuery) //封裝插件

確定創建插件類型,選擇創建方式,例如,創建一個設置元素字體顏色的插件,則應該創建jquery對象方法,考慮到jquery提供了插件擴展方法extend(),調用該方法會更為規范。
. 代碼如下:
(function($){
//自定義插件代碼
$.extend($.fn,{ //jquery對象擴展方法

})
})(jQuery) //封裝插件

一般插件都會接受參數,用來控制插件的 行為,例如,對於設置顏色的插件,應該允許用戶設置字體顏色,同時,應該考慮如果用戶沒有設置顏色,則應該保持默認色進行設置。
. 代碼如下:
(function($){
//自定義插件代碼
$.extend($.fn,{
color : function(options){
var options = $.extend({bcolor :"white",fcolor:"black"},options);
//
}
})
})(jQuery) //封裝插件

最後完善插件
. 代碼如下:
;(function($){
$.extend($.fn,{
color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);
//函數體
return this.each(function(){
$(this).css("color",options.bcolor);
$(this).css("background",options.fcolor);
});
}//color==end
})
})(jQuery);

調用看看
. 代碼如下:
$("h1").color({bcolor : "#ccc",fcolor:"#eee"});
$('a').color("#fff");
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved