bootstrap響應(yīng)式網(wǎng)站開發(fā)實(shí)例教程課件第8章第14節(jié)

1、bootstrap響應(yīng)式網(wǎng)站開發(fā)第八章 Bootstrap的JavaScript插件Bootstrap插件概述1Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap 自帶 12 種 jQuery 插件，具體包括：過渡效果、模態(tài)框、下拉菜單、滾動監(jiān)聽、標(biāo)簽頁、提示工具、彈出框、警告框、按鈕、折疊、輪播、附加導(dǎo)航。Bootstrap的JavaScript插件-Bootstrap插件概述1.Bootstrap的JS插件功能2.引用JS插件的方式站點(diǎn)引用 Bootstrap 插件的方式有兩種：單獨(dú)引用：使用 Bootstrap 的個別的*.js文件。一些插件和 CSS 組件依賴于其他插件。如果單獨(dú)引用插

2、件，請先確保弄清這些插件之間的依賴關(guān)系。同時引用：使用bootstrap.js或壓縮版的bootstrap.min.js。引用的代碼如下：注意：不要嘗試同時引用這兩個文件，因?yàn)閎ootstrap.js和bootstrap.min.js都包含了所有的插件。Bootstrap響應(yīng)式網(wǎng)站開發(fā)由于Bootstrap 的JS插件還使用了一些jQuery 插件，所以需要引用jQuery插件庫，jQuery是一個JavaScript函數(shù)庫。jQuery是一個輕量級的“寫的少，做的多”的JavaScript庫。jQuery 庫是一個 JavaScript 文件，大家可以使用 HTML 的 標(biāo)簽引用它： 3.引

3、用jQuery的方式Bootstrap的JavaScript插件-Bootstrap插件概述過渡效果與模態(tài)框2Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框過渡效果簡介要使用Bootstrap的過渡效果，只需導(dǎo)入 bootstrap.js 或 bootstrap.min.js 文件就行了，因?yàn)樗薪M件默認(rèn)已經(jīng)具有基本的過渡效果。默認(rèn)情況下，以下組件使用了的過渡效果：模態(tài)對話框（Modal）的滑入滑出和淡入淡出；標(biāo)簽頁（Tab）的淡出；警告框（Alert）的淡出；輪番（Carousel）的滑入滑出。需要注意的是，Bootstrap的過渡效果全部使用

4、了CSS3的動畫特性，由于受CSS3的限制，它提供的特效非常有限。并且，IE8及以下的版本均不支持CSS3的動畫特性，這些瀏覽器中將看不到過渡效果。例如在模態(tài)框中添加加上.fade即可實(shí)現(xiàn)漸隱漸現(xiàn)。Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框簡介在 Bootstrap 框架中把模態(tài)彈出框統(tǒng)一稱為 Modal。這種彈出框效果在大多數(shù) Web 網(wǎng)站的交互中都可見。比如點(diǎn)擊一個按鈕彈出一個框，彈出的框可能是一段文件描述，也可能帶有按鈕操作，也有可能彈出的是一張圖片。模態(tài)框（Modal）也可理解為覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單

5、獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等，如圖8-1所示為用戶注冊的模態(tài)框。圖8-1 模態(tài)框頁面效果Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框靜態(tài)模態(tài)框的使用方法 Bootstrap框架中的模態(tài)彈出框，分別運(yùn)用了“modal”“modal-dialog”和“modal-content”樣式，而彈出窗真正的內(nèi)容都放置在“modal-content”中，modal-content是樣式的關(guān)鍵。主要設(shè)置了彈窗的邊框、邊距、背景色和陰影等樣式，其主要又包括三個部分：彈出框頭部，一般使用“modal-header”表

6、示，主要包括標(biāo)題和關(guān)閉按鈕。彈出框主體，一般使用“modal-body”表示，彈出框的主要內(nèi)容。彈出框腳部，一般使用“modal-footer”表示，主要放置操作按鈕。切換模態(tài)框（Modal）插件的隱藏內(nèi)容：通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性data-toggle=modal，同時設(shè)置data-target=#identifier或href=#identifier來指定要切換的特定的模態(tài)框（帶有 id=identifier）。通過 JavaScript，可以通過簡單的一行 JavaScript 來調(diào)用帶有 id=identifier 的模態(tài)框：$(#identif

7、ier).modal(options)。Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框靜態(tài)模態(tài)框的使用方法Bootstrap中的“模態(tài)彈出框”有以下幾個特點(diǎn)：模態(tài)彈出窗是固定在瀏覽器中的。單擊右側(cè)全屏按鈕，在全屏狀態(tài)下，模態(tài)彈出窗寬度是自適應(yīng)的，而且modal-dialog水平居中。當(dāng)瀏覽器視窗大于768px時，模態(tài)彈出窗的寬度為600px。模態(tài)彈出窗的背景常常有一個半透明的蒙層效果。觸發(fā)彈窗時，彈窗是從上到下、逐漸浮現(xiàn)到頁面前的。下面，來認(rèn)識一下靜態(tài)模態(tài)框的調(diào)用?！緦?shí)例8-1】靜態(tài)的模態(tài)窗口調(diào)用，代碼如右所示。運(yùn)行【實(shí)例8-1】這段代碼的輸出結(jié)

8、果如圖8-2所示。a）靜態(tài)模態(tài)框觸發(fā)前效果b）模態(tài)框觸發(fā)后彈出效果圖8-2靜態(tài)模態(tài)框效果靜態(tài)的模態(tài)窗口實(shí)例開始演示模態(tài)框 驗(yàn)證E-mail信息 關(guān)閉 提交驗(yàn)證 【實(shí)例8-1】靜態(tài)的模態(tài)窗口調(diào)用，代碼如下Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框靜態(tài)模態(tài)框的使用方法 使用模態(tài)窗口，需要有某種觸發(fā)器，可以使用按鈕或鏈接，本例使用的是按鈕，在按鈕元素上設(shè)置屬性data-toggle=modal，而data-target=#myModal是想要在頁面上加載的模態(tài)框的目標(biāo)?？梢栽陧撁嫔蟿?chuàng)建多個模態(tài)框，然后為每個模態(tài)框創(chuàng)建不同的觸發(fā)器。但不能在同一時間加

9、載多個模塊，但可以在頁面上創(chuàng)建多個在不同時間進(jìn)行加載。 在模態(tài)框中”.modal”類用來把 的內(nèi)容識別為模態(tài)框?！?fade”類在當(dāng)模態(tài)框被切換時，它會引起內(nèi)容淡入淡出。 ，modal-header 是為模態(tài)窗口的頭部定義樣式的類。class=close，close 是 CSS類，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。data-dismiss=modal，是自定義的 HTML5 data 屬性。在這里它被用于關(guān)閉模態(tài)窗口。class=modal-body，是 Bootstrap的 CSS class類，用于為模態(tài)窗口的主體設(shè)置樣式。class=modal-footer，是 Bootstrap CS

10、S 的 CSS類，用于為模態(tài)窗口的底部設(shè)置樣式。data-toggle=modal，HTML5 自定義的 data 屬性 data-toggle 用于打開模態(tài)窗口。 如果想要支持鍵關(guān)閉彈窗，需要在彈窗上設(shè)置tabindex=-1，也就是將如下代碼： 修改為： Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用 除了模態(tài)窗口一些常用的選項(xiàng)外，還有一些選項(xiàng)可以用來定制模態(tài)窗口的外觀和感觀，它們是通過 data 屬性或 JavaScript 來傳遞的，這些模態(tài)彈出窗默認(rèn)支持的自定義屬性如表8-1所示。選項(xiàng)名稱類型/默認(rèn)值Data 屬性名稱

11、描述backdropboolean 或 string static默認(rèn)值：truedata-backdrop指定一個靜態(tài)的背景，當(dāng)用戶點(diǎn)擊模態(tài)框外部時不會關(guān)閉模態(tài)框。keyboardboolean默認(rèn)值：truedata-keyboard當(dāng)按下 鍵時關(guān)閉模態(tài)框，設(shè)置為 false 時則按鍵無效。showboolean默認(rèn)值：truedata-show當(dāng)初始化時顯示模態(tài)框。remotepath默認(rèn)值：falsedata-remote使用 jQuery的.load方法，為模態(tài)框的主體注入內(nèi)容。如果添加了一個帶有有效 URL 的 href，則會加載其中的內(nèi)容。表8-1 模態(tài)彈出窗默認(rèn)支持的自定義屬性

12、除了使用自定義屬性” data-”觸發(fā)模態(tài)彈出框之外，還可以通過JavaScript方法來觸發(fā)模態(tài)彈出窗。比如說給按鈕設(shè)置一個單擊事件，然后觸發(fā)模態(tài)彈出窗。只需一行 JavaScript 代碼，即可通過元素的 id調(diào)用模態(tài)框。例如：$(#myModal).modal()Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用在Bootstrap框架中還為模態(tài)彈出窗提供了幾個參數(shù)設(shè)置，或者說為modal() 一起使用的方法，具體說明如表8-2所示。表8-2 模態(tài)窗常用的方法如果想取消ESC鍵的功能，代碼如下：$(#myModal).moda

13、l(keyboard:false);方法使用實(shí)例描述Options:.modal(options)$(#identifier).modal(keyboard: false)把內(nèi)容作為模態(tài)框激活。接受一個可選的選項(xiàng)對象。Toggle:.modal(toggle)$(#identifier).modal(toggle)手動切換模態(tài)框，觸發(fā)時反轉(zhuǎn)模態(tài)框的顯示狀態(tài)。Show:.modal(show)$(#identifier).modal(show)觸發(fā)時，打開模態(tài)框。Hide:.modal(hide)$(#identifier).modal(hide)觸發(fā)時，隱藏模態(tài)框。Bootstrap響應(yīng)式網(wǎng)站

14、開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用JavaScirpt調(diào)用模態(tài)框打開模態(tài)框 驗(yàn)證E-mail信息 【實(shí)例8-2】使用JavaScirpt調(diào)用模態(tài)框，代碼如下 關(guān)閉 提交驗(yàn)證 $(function() $(.btn).click(function() $(#myModal).modal(); ); );page1page2Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用運(yùn)行【實(shí)例8-2】這段代碼的輸出結(jié)果如圖8-3所示。a）Javsscript模態(tài)框觸發(fā)前效果b）Javsscript

15、模態(tài)框觸發(fā)后彈出效果圖8-3 JavaScript代碼調(diào)用模態(tài)框效果Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用模態(tài)彈窗還支持五種類型的事件，分別是模態(tài)彈出窗的彈出前、彈出后，關(guān)閉前、關(guān)閉后及遠(yuǎn)端數(shù)據(jù)加載后，具體描述如表8-3所示。事件描述實(shí)例show.bs.modal在調(diào)用 show 方法后觸發(fā)。$(#identifier).on(show.bs.modal, function () / 執(zhí)行一些動作.)shown.bs.modal當(dāng)模態(tài)框?qū)τ脩艨梢姇r觸發(fā)（將等待 CSS 過渡效果完成）。$(#identifier).on(

16、shown.bs.modal, function () / 執(zhí)行一些動作.)hide.bs.modal當(dāng)調(diào)用 hide 實(shí)例方法時觸發(fā)。$(#identifier).on(hide.bs.modal, function () / 執(zhí)行一些動作.)hidden.bs.modal當(dāng)模態(tài)框完全對用戶隱藏時觸發(fā)。$(#identifier).on(hidden.bs.modal, function () / 執(zhí)行一些動作.)loaded.bs.modal當(dāng)遠(yuǎn)端的數(shù)據(jù)源加載完數(shù)據(jù)之后觸發(fā)該事件。$(#identifier).on( loaded.bs.modal, function () / 執(zhí)行一些動

17、作.)表8-2 模態(tài)窗的事件Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用模態(tài)框（Modal）插件事件打開模態(tài)框（測試事件） 驗(yàn)證E-mail信息 【實(shí)例8-3】模態(tài)框（Modal）插件事件應(yīng)用，代碼如下 關(guān)閉 提交驗(yàn)證 page1page2 $(function() $(.btn).click(function() $(#myModal).modal(toggle); ); ); $(#myModal).on(hide.bs.modal, function() $(#btn).html(打開); ); $(#myModal).

18、on(show.bs.modal, function() $(#btn).html(關(guān)閉); ); 【實(shí)例8-3】中編寫的JavaScript代碼如下：Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-過渡效果與模態(tài)框模態(tài)框中事件的使用運(yùn)行【實(shí)例8-3】這段代碼的輸出結(jié)果如圖8-4所示。b）Javsscript模態(tài)框觸發(fā)后彈出效果圖8-4模態(tài)框事件應(yīng)用效果a）模態(tài)框顯示前效果b）模態(tài)框顯示后效果c）模態(tài)框關(guān)閉后效果標(biāo)簽頁2Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-標(biāo)簽頁標(biāo)簽頁簡介 一個網(wǎng)頁頁面上要顯示的信息越來越多，但不可能把全部

19、的內(nèi)容一次全部顯示出來，這時可通過標(biāo)簽（Tab）效果的展示方式為各個內(nèi)容進(jìn)行分類，用戶可以通過鼠標(biāo)單擊來進(jìn)行內(nèi)容的切換，使得網(wǎng)頁中只要規(guī)劃一個小區(qū)域的位置，可以放置的信息就會比原先多，如圖8-5所示。a）騰訊賽事直播標(biāo)簽頁內(nèi)容 b）騰訊精彩回放標(biāo)簽頁內(nèi)容圖8-5標(biāo)簽頁頁面效果Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-標(biāo)簽頁標(biāo)簽頁的基礎(chǔ)使用方法標(biāo)簽頁使用時，首先要加入相關(guān)類，其次是標(biāo)簽頁與切換內(nèi)容的名稱對應(yīng)。第一步：在標(biāo)簽的標(biāo)簽中設(shè)置.nav和.nav-tabs兩個類接口運(yùn)用標(biāo)簽組件第二步：在互動切換的部分有href=”#id名稱”與顯示的內(nèi)容部分相對應(yīng)，也就

20、是HTML中的描點(diǎn)。要讓標(biāo)簽有淡入的效果，只需在每個標(biāo)簽內(nèi)容的.tab-pane類后加入.fade類即可，但第一個標(biāo)簽頁面需額外加入.in類，以便正確初始化淡入效果的內(nèi)容。運(yùn)行【實(shí)例8-4】這段代碼的輸出結(jié)果如圖8-5所示。a）網(wǎng)站首頁效果b）聯(lián)系我們效果圖8-5標(biāo)簽頁的頁面效果 網(wǎng)站首頁 企業(yè)案例 聯(lián)系我們 網(wǎng)站首頁內(nèi)容. 企業(yè)案例內(nèi)容. 聯(lián)系我們內(nèi)容.【實(shí)例8-4】標(biāo)簽頁的基本使用，代碼如下。Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-標(biāo)簽頁標(biāo)簽頁的JavaScript調(diào)用方法標(biāo)簽頁可以使用.$().tab方法激活標(biāo)簽頁元素和內(nèi)容容器。標(biāo)簽頁需要用一個da

21、ta-target或者一個指向 DOM 中容器節(jié)點(diǎn)的href。例如在【實(shí)例8-4】中加入如下代碼，可以實(shí)現(xiàn)直接顯示最后一個標(biāo)簽內(nèi)容。 $(function () $(#myTab a:last).tab(show) )最終顯示結(jié)果如圖8-5中b圖所示。提示工具4Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-提示工具提示工具簡介 在網(wǎng)頁中，想要描述或說明一個連接點(diǎn)的作用時，可通過提示工具Tooltip來實(shí)現(xiàn)。提示工具可使用CSS來實(shí)現(xiàn)動畫效果，用data屬性來存儲標(biāo)題信息。此效果的原理為：在任意元素中加入一個小覆蓋層，以便加入額外的信息，只要當(dāng)鼠標(biāo)移入時就能觸發(fā)此功能，如圖8-6所示。圖8-6提示工具使用效果Bootstrap響應(yīng)式網(wǎng)站開發(fā)Bootstrap的JavaScript插件-提示工具提示工具的基礎(chǔ)使用方法提示工具（Tooltip）插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把提示工具（tooltip）放在它們的觸發(fā)元素后面。具體有以下兩種方式添加提示工具（tooltip）。第一種方法，通過 data 屬性。如需添加一個提示工具（tooltip），只需向一個錨標(biāo)簽添加data-toggle=tooltip即可。錨的 title 即為提示工具（tooltip）的文本。默認(rèn)情況下，插件把