Terry.Li-彬

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

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

? ??1.模態窗口(Modals) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

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

? ? ? ?如果使用Jquery調用Modal，也只需要一行javascript代碼，

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

?

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

圖4-1 模態窗口(Modal)

代碼如下：

? ??2.滾動監控(Scrollspy) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

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

? 效果如圖4-2所示：

圖4-2 滾動監控(Scrollspy)

? ? ? ? ? 代碼如下：

?

? ? ?3.標簽效果(Tabs)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? 標簽插件添加了快速的動態的tab和pill，來實現過渡頁面內容的效果。同樣的，我們可以不用寫任何javascript代碼來實現該效果，我們只需要在tab或者piil頁面要素上簡單地添加上nav 和nav-tabs并引用該js文件即可。同時可以使用ul標簽來樣式化你的要素。具體效果可以到官方文檔的該處嘗試一下。效果如圖4-3所示：

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

　　　代碼如下：

?

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

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

? ? ? ? ? ? 提示效果，就是用戶鼠標劃過或者放在某些連接上，浮現的內容提示和補充。Bootstrap2.0的Tooltip的實現，受Jason Frame寫的出色的jQuery.tipsy插件所啟發。該版本的Tooltips 不再依賴于圖片，而是使用CSS3的動畫和數據屬性。與本文上述的其他插件不同的是，tooltip的觸發事件，必須使用javascript代碼實現。我們先來看Tooltip的html寫法：

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

?

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

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

?

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

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

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

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

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

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

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

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

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

? ? ? ? ? 而它的屬性與tooltip幾乎完全一樣……只多一個content，用來存儲疊加的內容。效果如圖4-5所示：

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

? ? ? 代碼如下所示：

?

??參考文獻與延伸閱讀：

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

? ? ?2.?模態窗口和非模態窗口?http://tgyd2006.iteye.com/blog/211497

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