欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery插件 tabBox實(shí)現(xiàn)代碼

 更新時(shí)間:2010年02月09日 13:45:50   作者:  
最近對js以及jq產(chǎn)生了濃厚的興趣,看到j(luò)q有很多很好用的插件,功能各異,包括webUI,jqGrid等等。心里萌發(fā)了制作屬于自己的jq插件的想法。
查了一下jq的官方插件編寫文檔(http://docs.jquery.com/Plugins/Authoring)以及文檔中推薦的Mike Alsup寫的一篇A Plugin Development Pattern。英語不是很好,但還是努力看下來(既學(xué)習(xí)到知識又能練習(xí)英語,何樂不為),照貓畫虎的寫了一個(gè)處女作——tabBox。

  顧名思義,這個(gè)插件就是方便的產(chǎn)生具有tab選項(xiàng)卡功能“盒子”的??磮D一下就明白

這樣功能在網(wǎng)頁上是非常腸炎寧個(gè)的,不論前臺(tái)后臺(tái)。

  在這,我首先提供了3個(gè)參數(shù)用于自定義插件,

復(fù)制代碼 代碼如下:

$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : "tabBox/"
};

width和height定義“盒子”的寬度和高度,basePath用于定義使用插件的頁面對插件文件夾的相對路徑。這個(gè)選項(xiàng)的出現(xiàn)時(shí)不得已而為之,因?yàn)檫x項(xiàng)卡的樣式中用到了圖片,而必須要有一個(gè)基準(zhǔn)路徑才能正確找到圖片的路徑。這也是參照了一個(gè)叫jqtransform(http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)的插件的做法,他也有個(gè)參數(shù)用于指定圖片文件夾所在的位置。當(dāng)然還有一種做法,就是想WebUI(http://www.jqueryui.com/)一樣,樣式寫到css文件里,這樣圖片的引用就是先對與css文件的路徑了,而這兩個(gè)都是插件的組成部分,相對路勁是不變的。所以不用提供這個(gè)路徑了。只是由于這個(gè)插件用到的樣式比較少,所以沒有采用這個(gè)方法。

  插件的原理很簡單,核心的函數(shù)就是一個(gè)render(),用于渲染出tab的樣式:

復(fù)制代碼 代碼如下:

$.fn.tabBox.render = function() {
$(".tabBox").css({
width : $.fn.tabBox.defaults.width+"px",
height : $.fn.tabBox.defaults.height+"px",
position : "relative",
border : "1px #ccc solid",
background : "url("+$.fn.tabBox.defaults.basePath+"tabHead.gif) top left repeat-x"
});
$(".tabBox h2").each(function(i){
$(this).css({
width : "80px",
height : "30px",
position : "absolute",
"border-top" : "none",
cursor : "pointer",
left : 10+(i*80),
background : "url("+$.fn.tabBox.defaults.basePath+"tabNormal.gif) top right no-repeat",
"text-align" : "center",
"font-size" : "12px",
"font-weight" : "normal",
color : "#06c",
"line-height" : "22px"
});
});
$(".tabBox div").each(function(){
$(this).css({
width : $.fn.tabBox.defaults.width+"px",
height : ($.fn.tabBox.defaults.height-30)+"px",
display : "none",
position : "absolute",
top : "30px"
});
});
$(".tabBox h2.curTab").css({
background : "url("+$.fn.tabBox.defaults.basePath+"tabCurTab.gif) top center no-repeat",
"font-weight" : "bolder"
});
$(".tabBox h2.curTab + div").css({
display : "block"
});
};

可以看到這個(gè)函數(shù)全都是設(shè)置樣式的代碼,(也讓我體驗(yàn)了一下用jq設(shè)置css的快感,依然記得e.style.backgroud的時(shí)代~),這個(gè)函數(shù)保證了顯示當(dāng)前被激活的標(biāo)簽和對應(yīng)的信息。另外,通過捕捉tab選項(xiàng)卡的click事件來改變當(dāng)前的激活標(biāo)簽,再渲染一次就可以了。
復(fù)制代碼 代碼如下:

$(".tabBox h2").click(function(){
$(".tabBox h2").removeClass("curTab");
$(this).addClass("curTab");
$.fn.tabBox.render();
});


寫完之后的一點(diǎn)思考:

1、對插件自定義選項(xiàng)的做法看不太懂
復(fù)制代碼 代碼如下:

// build main options before element iteration
var opts = $.extend({}, $.fn.tabBox.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;


這差不多是從Mike Alsup的文章中照搬過來的。照他的說法,好像是可以自定義整個(gè)插件的選項(xiàng),還可以定義某一個(gè)特定元素的選項(xiàng),可我試了一下,似乎不可以~。難道是我沒看懂他說的?

2、目前tab是捕捉click事件的,我想加強(qiáng)一下,可以自定義是捕捉click還是mouseover,是的,可以寫兩個(gè)事件處理函數(shù)。但怎么樣來通過配置決定調(diào)用哪個(gè)處理程序呢?
打包下載

相關(guān)文章

最新評論