Terry.Li-彬

回顧：Bootstrap組件豐富同時(shí)具有良好可擴(kuò)展性，能夠很好地應(yīng)用在生產(chǎn)環(huán)境。這些組件包括按鈕(Button),導(dǎo)航(Navigation)，縮略圖(?thumbnails),提醒(Alert)，進(jìn)度條(progress bar)等，能夠很好減少前端工程師的代碼量，實(shí)現(xiàn)更加豐富充實(shí)的頁(yè)面。

? ? ? Bootstrap作為一套良好的前端工具，要實(shí)現(xiàn)現(xiàn)代的動(dòng)態(tài)頁(yè)面效果，javascript插件是必不可少的。它提供了12個(gè)基于JQuery類庫(kù)的插件，包括模態(tài)窗口(Modals),滾動(dòng)監(jiān)控(Scrollspy),標(biāo)簽效果(Tabs),提示效果(Tooltip),“泡芙”效果(popovers),警告區(qū)域(Alerts),折疊效果(Collapse),旋轉(zhuǎn)木馬(carousel),輸入提示(typeahead)等.這些內(nèi)容會(huì)分作兩講來(lái)闡述，本講將深入講解modals等插件。在bootstrap中所有涉及動(dòng)畫(huà)效果的javascript插件，都必須先引用Transitions JS，包括modals,alerts等來(lái)實(shí)現(xiàn)淡出效果。

? ??1.模態(tài)窗口(Modals) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ??模態(tài)窗口是指除非采取有效的關(guān)閉手段，用戶的鼠標(biāo)焦點(diǎn)或者輸入光標(biāo)將一直停留在其上的窗口(對(duì)話框).Bootstrap對(duì)于模態(tài)窗口的實(shí)現(xiàn)十分精簡(jiǎn)靈活，用戶只需要使用少量的代碼和智能的默認(rèn)設(shè)置，即能實(shí)現(xiàn)傳統(tǒng)實(shí)現(xiàn)傳統(tǒng)的Javascript效果的模態(tài)窗口。默認(rèn)的Bootstrap模態(tài)窗口效果，包括對(duì)話框從屏幕上方落下，屏幕其他區(qū)域變暗淡，模態(tài)窗口的隱藏等。這些效果分別對(duì)應(yīng).modal .fade .hide 這些類。我們可以不用寫(xiě)任何javascript代碼來(lái)實(shí)現(xiàn)Modal效果，只需要將?data-toggle="modal"?放置于在觸發(fā)控制要素(如按鈕，超鏈接等)，并指定它的Modal窗口的ID鏈接(data-target="#mymodal"，href="#mymodal")。當(dāng)這些控制要素被觸發(fā)的時(shí)候，modal窗口就會(huì)出現(xiàn)了。模式窗口的內(nèi)容可以非常豐富，這些內(nèi)容都需要包括在modal的div內(nèi)，并可以定義modal窗口的頭部，內(nèi)容和腳部。

? ? ? ?如果使用Jquery調(diào)用Modal，也只需要一行javascript代碼，

$('#myModal').modal(options)

?

? ? ? ? 該選項(xiàng)包括backdrop,keyboard,show三項(xiàng)，主要控制模態(tài)窗口的動(dòng)作。Modal的方法主要包括show,hide,toogle等，主要用于模態(tài)窗口的狀態(tài)控制。Modal的觸發(fā)事件包括shown,hiden等，主要用于控制模態(tài)窗口的功能觸發(fā)控制。具體效果可以到官方文檔的該處嘗試一下，點(diǎn)擊Launch demo modal按鈕即可。Modal的實(shí)現(xiàn)如圖4-1所示：

圖4-1 模態(tài)窗口(Modal)

代碼如下：

? ??2.滾動(dòng)監(jiān)控(Scrollspy) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

? ? ? ? ? 滾動(dòng)監(jiān)控是用來(lái)自動(dòng)更新導(dǎo)航位置基于用戶頁(yè)面滾動(dòng)的位置。實(shí)現(xiàn)該效果，也只需要在你想監(jiān)控的滾動(dòng)要素上，添加data-spy="scroll"，一般是在body上添加。使用jquery 同樣調(diào)用方法比較簡(jiǎn)單，只需要一行代碼：$('#navbar').scrollspy() .該插件只有refresh方法，offset屬性等。具體效果可以到官方文檔的該處嘗試一下。

? 效果如圖4-2所示：

圖4-2 滾動(dòng)監(jiān)控(Scrollspy)

? ? ? ? ? 代碼如下：

?

? ? ?3.標(biāo)簽效果(Tabs)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? 標(biāo)簽插件添加了快速的動(dòng)態(tài)的tab和pill，來(lái)實(shí)現(xiàn)過(guò)渡頁(yè)面內(nèi)容的效果。同樣的，我們可以不用寫(xiě)任何javascript代碼來(lái)實(shí)現(xiàn)該效果，我們只需要在tab或者piil頁(yè)面要素上簡(jiǎn)單地添加上nav 和nav-tabs并引用該js文件即可。同時(shí)可以使用ul標(biāo)簽來(lái)樣式化你的要素。具體效果可以到官方文檔的該處嘗試一下。效果如圖4-3所示：

圖4-3?標(biāo)簽效果(Tabs)?

　　　代碼如下：

?

? ? ?4.提示效果(Tooltip)與“泡芙”效果(popovers) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? 4.1?提示效果(Tooltip)

? ? ? ? ? ? 提示效果，就是用戶鼠標(biāo)劃過(guò)或者放在某些連接上，浮現(xiàn)的內(nèi)容提示和補(bǔ)充。Bootstrap2.0的Tooltip的實(shí)現(xiàn)，受Jason Frame寫(xiě)的出色的jQuery.tipsy插件所啟發(fā)。該版本的Tooltips 不再依賴于圖片，而是使用CSS3的動(dòng)畫(huà)和數(shù)據(jù)屬性。與本文上述的其他插件不同的是，tooltip的觸發(fā)事件，必須使用javascript代碼實(shí)現(xiàn)。我們先來(lái)看Tooltip的html寫(xiě)法：

						<
						a 
						href
						="#"
						 rel
						="tooltip"
						 title
						="first tooltip"
						>別摸我</a>

?

? ? ? ? ? ?基于性能的原因，?提示效果(Tooltip)和“泡芙”效果(popovers)都在屬性中內(nèi)置了數(shù)據(jù)選擇器，我們可以指定css或者jquery選擇器來(lái)使用它們。觸發(fā)tooltip，只需要一行代碼：

$('#example').tooltip(options)

?

? ? ? ? ? 它的屬性選項(xiàng)包括：animation,placement,selector,trigger,delay等。animation是用來(lái)實(shí)現(xiàn)提示的淡出css效果，placement則控制提示出現(xiàn)的位置(top,button,left等)。selector選項(xiàng)就是提供給用戶，以控制tooltip出現(xiàn)在(委派于/裝飾與)頁(yè)面具體的某個(gè)目標(biāo)上，默認(rèn)是false。trigger是觸發(fā)tooltip的鼠標(biāo)或者鍵盤事件類型，包括hover,focus,maual等。delay則是控制tooltip的顯示和延遲的時(shí)間變量(ms)，形式可以是這樣：delay: { show: 500, hide: 100 }。

? ? ? tooltip效果如圖4-4所示：

圖4-4?提示效果(Tooltip)

? ? ? ? ?代碼如下所示：

? ? ? ? ?4.2?“泡芙”效果(popovers)

? ? ? ? ? ? ?“泡芙”效果就是將一些次要的內(nèi)容作為一個(gè)小的疊加層展添加到具體頁(yè)面要素上，實(shí)現(xiàn)ipad風(fēng)格的提示效果(實(shí)際上就是放大版的tooltip)。因此實(shí)現(xiàn)“泡芙”效果(popovers)首先需要引用tooltips插件。我們先來(lái)看看“泡芙”效果(popovers)的html的寫(xiě)法。

						<
						a 
						class
						="btn  btn-success"
						 type
						="submit"
						 rel
						="popover"
						 title
						="推薦到射交網(wǎng)絡(luò)"
						 data-content
						="你以為我會(huì)告訴你渣浪老刪帖嗎？！"
						>  推薦</a>

? ? ? ? 對(duì)比tooltip的html的markup，我們可以看到兩者的差別就只有在于rel的類型而已。同樣的，觸發(fā)popovers，只需要一行代碼：

$('#example').popover(options)

? ? ? ? ? 而它的屬性與tooltip幾乎完全一樣……只多一個(gè)content，用來(lái)存儲(chǔ)疊加的內(nèi)容。效果如圖4-5所示：

圖4-5?“泡芙”效果(popovers)

? ? ? 代碼如下所示：

?

??參考文獻(xiàn)與延伸閱讀：

? ? ?1.Modal window?http://en.wikipedia.org/wiki/Modal_window

? ? ?2.?模態(tài)窗口和非模態(tài)窗口?http://tgyd2006.iteye.com/blog/211497

? ? ?3.Popover?http://en.wikipedia.org/wiki/Popover