劉迎春 祝輝

【摘 要】BootStrap以其簡(jiǎn)單好用和跨平臺(tái)性，逐漸成為web前端開(kāi)發(fā)的首選，其中含有豐富的控件，Tab就是一個(gè)會(huì)經(jīng)常用到的控件。然而B(niǎo)ootStrap中的原生Tab樣式不是很美觀，而且也沒(méi)有賦予其行為。本文主要介紹對(duì)該Tab控件的美化及賦予其與用戶的交互行為。

【關(guān)鍵詞】BootStrap，tab，Web前端，Jquery

一、BootStrap

BootStrap是Twitter退出一款前端框架。它是基于HTML、CSS和JavaScript之上構(gòu)建的。它簡(jiǎn)單好用，使Web開(kāi)發(fā)更加容易和便捷。它主要是由Twitter的web設(shè)計(jì)人員MarkOtto和Jacob Thornton使用CSS動(dòng)態(tài)語(yǔ)言Less合作攜程。它提供了優(yōu)雅簡(jiǎn)潔的HTMl和CSS規(guī)范。推出以后大受好評(píng)，一直以是GitHub上最熱的開(kāi)源項(xiàng)目。很多有名的公司和機(jī)構(gòu)都使用了該框架：包括NASA和MSNBC（微軟全國(guó)廣播公司）的Breaking News以及一些國(guó)內(nèi)以移動(dòng)為先的開(kāi)發(fā)框架如Wex5就是基于BootStrap源碼進(jìn)行性能優(yōu)化而來(lái)。

二、關(guān)于BootStrap的Tab控件

1、使用場(chǎng)合

Tab控件可以利用較小的版面篇幅來(lái)展現(xiàn)大量的信息，是網(wǎng)站首頁(yè)常用控件之一。它將所有的信息分別羅列在幾個(gè)選項(xiàng)卡中，當(dāng)用戶點(diǎn)擊不同的選項(xiàng)卡會(huì)切換不同的信息區(qū)域。

2、Tab控件的結(jié)構(gòu)

該控件分為選項(xiàng)卡區(qū)和信息展示區(qū)。

（1）選項(xiàng)卡區(qū)

該區(qū)域通常含有該選項(xiàng)卡的分類(lèi)名稱，如展示新聞的Tab可能會(huì)分為“國(guó)內(nèi)”，“國(guó)外”等選項(xiàng)卡等。用戶正是點(diǎn)擊該區(qū)域來(lái)查看它們想看的信息內(nèi)容。

該區(qū)域使用了HTML的列表來(lái)完成，每個(gè)列表項(xiàng)就是選項(xiàng)卡的名稱。選項(xiàng)卡中包含了一個(gè)超級(jí)鏈接，該鏈接的地址指向該選項(xiàng)卡所對(duì)應(yīng)的列表地址（列表ID）。

（2）信息展示區(qū)

當(dāng)用戶點(diǎn)擊選項(xiàng)卡時(shí)就會(huì)看到相應(yīng)的信息展示。如上述HTML代碼中，當(dāng)用戶點(diǎn)擊“最新”選項(xiàng)卡的時(shí)候，就能看到網(wǎng)站中所發(fā)布的所有最新文章的信息展示區(qū)。

每個(gè)DIV的ID是唯一的，對(duì)應(yīng)于前面選項(xiàng)卡的鏈接所指向的地址。

為什么要修改BootStrap的Tab控件

BootStrap中的tab控件以其簡(jiǎn)單易用而很受廣大開(kāi)發(fā)者的歡迎。但是，它有幾個(gè)缺點(diǎn)。

3、它的樣式比較單一

BootStrap原生的Tab控件的樣式比較簡(jiǎn)單，是比較傳統(tǒng)的標(biāo)簽頁(yè)的樣式，如果對(duì)界面沒(méi)有要求的話可以直接拿來(lái)使用。然而，在實(shí)際應(yīng)用中，為了讓用戶能喜歡自己的網(wǎng)站或應(yīng)用，我們一般會(huì)采用更好看的界面設(shè)計(jì)。

4、缺乏與用戶的交互

原生的BootStrap Tab，當(dāng)用戶單機(jī)某個(gè)選項(xiàng)卡就會(huì)呈現(xiàn)該選項(xiàng)卡中的內(nèi)容。而我們?cè)诰W(wǎng)站的首頁(yè)總是希望能夠給用戶推送足夠多的有用信息，我們希望給Tab增加一些動(dòng)態(tài)的效果——輪換展現(xiàn)各個(gè)信息區(qū)。這樣即使用戶不主動(dòng)點(diǎn)擊切換選項(xiàng)卡，也可以自動(dòng)展示網(wǎng)站信息。

三、實(shí)現(xiàn)原理

1、界面的美化

我們知道在BootStrap中所有元素的樣式都是通過(guò)CSS來(lái)控制的，那么要改變Tab控件的樣式，就需要些新的CSS代碼覆蓋原有的默認(rèn)CSS。

（1）選項(xiàng)卡部分的美化

我們通過(guò)CSS給選項(xiàng)卡添加新的背景顏色改變其原有的樣式（新增一個(gè)指向信息展示區(qū)的下三角），當(dāng)選中某選項(xiàng)卡時(shí)用亮色顯示，同時(shí)改變選項(xiàng)卡名稱的字體樣式。

（2）信息展示區(qū)的美化

信息展示區(qū)主要設(shè)置信息內(nèi)容的內(nèi)外邊距，字體大小，行高，邊框等樣式，讓其看起來(lái)比較舒服即可。

2、交互行為的添加

由于BootStrap中的所有元素的行為都是通過(guò)JavaScript來(lái)控制的，那么我們引入JQuery后就可以使用JQuery來(lái)重新定義其行為，我們希望在Tab中添加的交互行為包括：

（1）Tab自動(dòng)輪換

a） 選項(xiàng)卡每隔一定時(shí)間會(huì)自動(dòng)切換，切換時(shí)間可以自己設(shè)置。

b） 當(dāng)用戶將鼠標(biāo)懸停到選項(xiàng)可得時(shí)候，停止切換

c） 鼠標(biāo)移開(kāi)，繼續(xù)切換

實(shí)現(xiàn)過(guò)程：

我們新建一個(gè)函數(shù)timer用于建立一個(gè)計(jì)時(shí)器，該函數(shù)接收一個(gè)標(biāo)簽項(xiàng)索引作為參數(shù)，當(dāng)計(jì)時(shí)時(shí)間到的時(shí)候就會(huì)顯示當(dāng)前標(biāo)簽項(xiàng)所對(duì)應(yīng)的信息展示區(qū)而隱藏其他信息展示區(qū)。在頁(yè)面加載完成后遍歷每個(gè)標(biāo)簽頁(yè)，為其添加監(jiān)聽(tīng)函數(shù)，當(dāng)監(jiān)聽(tīng)到鼠標(biāo)懸停（mouseover）事件，停止切換，當(dāng)監(jiān)聽(tīng)到鼠標(biāo)移開(kāi)（mouseout）事件后，繼續(xù)切換。

總結(jié)

本文介紹了一種修改BootStrap原生Tab控件的樣式和行為的方法。當(dāng)然，這種方法對(duì)其他的BootStrap控件也是適用的。由于BootStrap是基于HTML和CSS及JavaScript的，那么，我們就可以通過(guò)修改CSS來(lái)控制其元素的樣式，通過(guò)JavaScript來(lái)修改其原生控件的行為。

參考文獻(xiàn)：

[1]BootStrap前端框架。Bootstrap中文網(wǎng)http：//www.bootcss.com/

[2]跨端移動(dòng)開(kāi)發(fā)框架WeX5 .開(kāi)源中國(guó)社區(qū)[引用日期2015-06-11] http：//www.oschina.net/p/x5？fromerr=tnuMBBME

[3] 周玲余：《基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)》[J]，計(jì)算機(jī)與現(xiàn)代化，2013年01期。

[4]王晶、溫向彬：《利用jQuery操作HTML元素》[J]農(nóng)業(yè)網(wǎng)絡(luò)信息，2008年04期。

[5] 李沖、 熊淑華、 魏穎穎：《基于CSS與JavaScript技術(shù)的Tab面板的設(shè)計(jì)與實(shí)現(xiàn)》[J] 計(jì)算機(jī)技術(shù)與發(fā)展，2011年03期