劉迎春 祝輝

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

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

一、BootStrap

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

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

1、使用場合

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

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

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

（1）選項卡區(qū)

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

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

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

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

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

為什么要修改BootStrap的Tab控件

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

3、它的樣式比較單一

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

4、缺乏與用戶的交互

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

三、實現(xiàn)原理

1、界面的美化

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

（1）選項卡部分的美化

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

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

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

2、交互行為的添加

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

（1）Tab自動輪換

a） 選項卡每隔一定時間會自動切換，切換時間可以自己設(shè)置。

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

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

實現(xiàn)過程：

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

總結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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