jQuery插件 tabBox實(shí)現(xiàn)代碼
顧名思義,這個(gè)插件就是方便的產(chǎn)生具有tab選項(xiàng)卡功能“盒子”的??磮D一下就明白
這樣功能在網(wǎng)頁上是非常腸炎寧個(gè)的,不論前臺(tái)后臺(tái)。
在這,我首先提供了3個(gè)參數(shù)用于自定義插件,
$.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的樣式:
$.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)簽,再渲染一次就可以了。
$(".tabBox h2").click(function(){
$(".tabBox h2").removeClass("curTab");
$(this).addClass("curTab");
$.fn.tabBox.render();
});
寫完之后的一點(diǎn)思考:
1、對插件自定義選項(xiàng)的做法看不太懂
// 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)文章
基于jQuery實(shí)現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時(shí)候,我們經(jīng)常會(huì)面臨一個(gè)問題,就是讓一個(gè)div實(shí)現(xiàn)水平和垂直居中,雖然好幾種方式實(shí)現(xiàn),但是今天介紹時(shí)我最喜歡的方法,通過css和jQuery實(shí)現(xiàn)。2011-08-08jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)浮動(dòng)層隨瀏覽器滾動(dòng)條滾動(dòng)的方法,涉及jQuery操作頁面元素滾動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09基于jQuery通過jQuery.form.js插件實(shí)現(xiàn)異步上傳
這篇文章主要介紹了基于jQuery通過jQuery.form.js插件實(shí)現(xiàn)異步上傳,代碼很詳細(xì),感興趣的小伙伴們可以參考一下2015-12-12jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼
在使用JqGrid時(shí),Table中最后一列是操作列,在操作列中每一行都有一個(gè)操作按鈕,該操作按鈕和下拉菜單非常類似,下面給大家分享jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起學(xué)習(xí)吧2016-12-12jQuery實(shí)現(xiàn)為圖片添加鏡頭放大效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)為圖片添加鏡頭放大效果的方法,提供了四種放大鏡效果供大家選擇使用,并附有完整的源碼下載地址,需要的朋友可以參考下2015-06-06jQuery.ajax實(shí)現(xiàn)根據(jù)不同的Content-Type做出不同的響應(yīng)
使用H5+ASP.NET General Handler開發(fā)項(xiàng)目,使用ajax進(jìn)行前后端的通訊。有一個(gè)場景需求是根據(jù)服務(wù)器返回的不同數(shù)據(jù)類型,前端進(jìn)行不同的響應(yīng),這里記錄下如何使用$.ajax實(shí)現(xiàn)該需求,需要的朋友可以參考下2016-11-11