jquery 插件學習(五)
更新時間:2012年08月06日 22:12:41 作者:
一般對外發(fā)布的插件都應該進行封裝,封裝的插件還應該符合規(guī)范,只有這樣寫的插件才具有推廣價值,并得到其他用戶的喜愛
這節(jié)封裝插件了,進展怎么樣呢?
一般對外發(fā)布的插件都應該進行封裝,封裝的插件還應該符合規(guī)范,只有這樣寫的插件才具有推廣價值,并得到其他用戶的喜愛。
首先第一步,是定義一個獨立域,代碼如下所示。
(function($){
//自定義插件代碼
})(jQuery) //封裝插件
確定創(chuàng)建插件類型,選擇創(chuàng)建方式,例如,創(chuàng)建一個設置元素字體顏色的插件,則應該創(chuàng)建jquery對象方法,考慮到jquery提供了插件擴展方法extend(),調用該方法會更為規(guī)范。
(function($){
//自定義插件代碼
$.extend($.fn,{ //jquery對象擴展方法
})
})(jQuery) //封裝插件
一般插件都會接受參數(shù),用來控制插件的 行為,例如,對于設置顏色的插件,應該允許用戶設置字體顏色,同時,應該考慮如果用戶沒有設置顏色,則應該保持默認色進行設置。
(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);
//函數(shù)體
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");
一般對外發(fā)布的插件都應該進行封裝,封裝的插件還應該符合規(guī)范,只有這樣寫的插件才具有推廣價值,并得到其他用戶的喜愛。
首先第一步,是定義一個獨立域,代碼如下所示。
復制代碼 代碼如下:
(function($){
//自定義插件代碼
})(jQuery) //封裝插件
確定創(chuàng)建插件類型,選擇創(chuàng)建方式,例如,創(chuàng)建一個設置元素字體顏色的插件,則應該創(chuàng)建jquery對象方法,考慮到jquery提供了插件擴展方法extend(),調用該方法會更為規(guī)范。
復制代碼 代碼如下:
(function($){
//自定義插件代碼
$.extend($.fn,{ //jquery對象擴展方法
})
})(jQuery) //封裝插件
一般插件都會接受參數(shù),用來控制插件的 行為,例如,對于設置顏色的插件,應該允許用戶設置字體顏色,同時,應該考慮如果用戶沒有設置顏色,則應該保持默認色進行設置。
復制代碼 代碼如下:
(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);
//函數(shù)體
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");
相關文章
Jquery實現(xiàn)$.fn.extend和$.extend函數(shù)
這篇文章主要介紹了Jquery實現(xiàn)$.fn.extend和$.extend函數(shù)的相關資料,需要的朋友可以參考下2016-04-04JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移
這篇文章主要為大家詳細介紹了JQuery實現(xiàn)表格數(shù)據(jù)行上移與下移,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02jQuery+ajax實現(xiàn)動態(tài)執(zhí)行腳本的方法
這篇文章主要介紹了jQuery+ajax實現(xiàn)動態(tài)執(zhí)行腳本的方法,分析了jQuery+Ajax實現(xiàn)腳本的動態(tài)加載與執(zhí)行的技巧,需要的朋友可以參考下2015-01-01jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)像柵欄一樣左右滑出式二級菜單效果代碼,涉及jquery鼠標click點擊事件及頁面元素動態(tài)操作的相關技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08jQuery checkbox選中問題之prop與attr注意點分析
這篇文章主要介紹了jQuery checkbox選中問題之prop與attr注意點,結合form表單實例形式分析了針對火狐瀏覽器下checkbox失效情況的處理技巧,需要的朋友可以參考下2016-11-11Jquery插件實現(xiàn)點擊獲取驗證碼后60秒內禁止重新獲取
這篇文章主要介紹了Jquery插件實現(xiàn)點擊獲取驗證碼后60秒內禁止重新獲取,十分常用的功能,這里分享給大家,有需要的小伙伴參考下吧。2015-03-03jQuery選擇器源碼解讀(五):tokenize的解析過程
這篇文章主要介紹了jQuery選擇器源碼解讀(五):tokenize的解析過程,本文用詳細的注釋解讀了tokenize方法的解析過程,需要的朋友可以參考下2015-03-03