Bootstrap JavaScript外掛程式

標籤：control   clear   contract   com   .com   提示框   dismiss   顯示   下拉式功能表   

在bs3.X中，提供了12種JavaScript外掛程式，分別是：動畫過渡（Transition）、模態彈窗（Modal）、下拉式功能表（Dropdown）、滾動偵測（Scrollspy）、選項卡（Tab）、提示 框（Tooltip）、彈出框（Popover）、警告框（Alert）、按鈕（Button）、摺疊（Collapse）、旋轉輪播（Carousel）、定位浮標（Affix）。

 

由於各種加班,身心疲憊...

 

 

動畫過渡

源檔案：transition.js

使用的動畫過渡效果全部使用了 CSS3的文法，所以IE6、IE7、IE8是不能用動畫過渡效果。

 

預設帶過渡效果的

• 模態彈窗（Modal）的滑動和漸層效果；
• 選項卡（Tab）的漸層效果；
• 警告框（Alert）的漸層效果；
• 旋轉輪播（Carousel）的滑動效果。

 

源碼

js源碼

transition.js部分源碼

通過以上代碼判斷是否支援動畫過渡效果。

CSS源碼

fade css

 

模態彈窗

源檔案：modal.js

模態彈窗（也叫popup，Bootstrap裡稱為Modal）是絕大部分互動式網站都需要的一種功能，一般有以下幾種用法：

• 提示資訊、警告資訊、大文本等；
• 確認提示（多按鈕）；
• 顯示表單元素（一般使用ajax操作等功能）；
• 其他需要特殊顯示的資訊（如單擊縮圖時放大圖片）。

 

使用

彈窗組件使用了3層 div容器元素，其分別應用了modal、modal-dialog、modalcontent樣式。然後在真正的內容容器modal-content內包括了彈窗 的頭（header）、內容（body）、尾（footer）3個部分，分別應用了3個樣式：modal-header、modal-body、modal-footer。

使用data-target

modal

 

js會控制在彈出modal之前，會加一個.modal-backdrop 用來設為灰色背景。

 

下拉式功能表

源檔案：dropdown.js

一般下拉式功能表都是在導航條（navbar）和選項卡（tab）上實現。

 

實現原理：

• 在網頁載入的時候，對所有帶有datatoggle="dropdown"樣式的元素進行事件綁定。
• 使用者單擊帶有data-toggle="dropdown"樣式的連結或按鈕時，觸發JavaScript事件代碼。
• Javascript事件代碼在父容器（本例是：<li class="dropdown">）上加一個.open樣式。
• 預設隱藏的.dropdown-menu菜單在外部有了.open樣式後，即可顯示出來，從而達到預期的效果。

 

使用：

• 菜單樣式和功能表項目保持一致（即按照第4節的要求編寫）。
• 被單擊的連結或者按鈕上需要應用data-toggle="dropdown"樣式，以便在初始化的時候JavaScript可以監控單擊事件

 

使用data-target

dropdown

 

滾動偵測

源檔案：scrollspy.js

滾動偵測（ScrollSpy）外掛程式是根據滾動的位置自動更新導航 條中相應的導航項

 

使用：

• 設定滾動容器，即在所要偵測的元素上設定data-target="#selector" data-spy="scroll"屬性。
• 設定菜單連結容器，該容器的id（或樣式）和data-target 屬性所對應的選擇符應一致。
• 在菜單容器內，必須有.nav樣式的元素，並且在其內部有 li元素，li內包含的a元素才是可以偵測高亮的菜單連結，即符 合.nav li > a這種選擇符的條件。

 

body上用data-spy

data-spy

 

 

注意：

子功能表雖然會高亮，但不會開啟，為了展示效果，需要手 動開啟下拉式功能表查看。
該外掛程式所需要的導航條只能在擁有.nav樣式的ul/li元素上起 作用

 

選項卡

源檔案：tab.js

就像我們平時使用的Windows作業系統裡的選項卡設定一樣，單擊一個選項，下面就顯示對應的選項卡面板

 

使用：

• 選項卡導航和選項卡面板要同時有（但不一定要放在一 起）。
• 導航連結裡要設定data-toggle="tab"，並且還要設定data-target="選擇符"（或href="選擇符"），以便單擊的時候能找到該選擇符所對應的tab-pane面板。
• tab-pane要放在tab-content裡面，要有id（或者CSS樣式） 並與data-target="選擇符"（或href="選擇符"）一致

 

nav-tabs

 

 

提示框

源檔案：tooltip.js

滑鼠移動到特定的元素上時，顯示相關的提示。類似於abbr的title功能，不過效果更加漂亮實用。

 

使用

• 指定的data-toggle="tooltip"屬性
• 然後再定義要顯示的內容,可以在title也可以用data-original-title
• js初始化.$(‘[data-toggle="tooltip"]‘).tooltip();

tooltip

 

彈出框

源檔案：popover.js

彈出框其實就是一種特殊的提示框，相比來說只是多了一個title標題而已

 

使用

（彈出框外掛程式的用法和提示框組件幾乎一模一樣），唯一不一樣的就是外掛程式名稱以及多餘的content欄位。而關於自動初始化，也和提示框外掛程式一樣，需要手動初始化

• 指定的data-toggle="popover"屬性
• 然後再定義要顯示的標題,可以在title也可以用data-original-title
• 定義內容，可以在content也可以data-content
• js初始化.$(‘[data-toggle=popover]‘).popover();

popover

 

警告框

源檔案：alert.js

就是在警告框組件的基礎上，提供了 單擊x號關閉警告框的功能

 

使用

alert

 

預設情況下，如果不設定data-target屬性，則會關閉x號按鈕元素所在的父元素容器，即外部的div元素。只需要保證設定了data-dismiss="alert"即可.

 

按鈕

源檔案：button.js

按鈕外掛程式提供了一組可以控制按鈕多種狀態的功能，比如，一個按鈕有禁用狀態、正在載入狀態、正常狀態等

 

使用

禁用狀態在這裡不再贅述。

正在載入和載入完成控制與顯示

btn

 

 

摺疊

源檔案：collapse.js

當單擊一個觸發元素時，在另外一個可摺疊地區進行顯示（或隱藏），再次單擊時可以反轉顯示狀態。（經典的手風琴風格）

 

使用

123	<!--  預設顯示摺疊地區--><a class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發改變</a><div id="demo" class="collapse in">摺疊地區...</div>

123	<!--  預設隱藏摺疊地區--> <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按鈕</button> <div id="demo" class="collapse ">摺疊地區...</div>

 

 

輪播

源檔案：carousel.js

旋轉輪播（Carousel）這個外掛程式有很多種譯法，有人叫輪播，有人叫傳送帶

1234567891011121314151617181920212223

<div data-ride="carousel" class="carousel slide" id="carousel-container"> <!-- 圖片容器 --> <div class="carousel-inner">  <div class="item">   <img alt="第一張圖" src="A" />  </div>  <div class="item active">   <img alt="第二張圖" src="B" />  </div>  <div class="item">   <img alt="第三張圖" src="C" />  </div> </div> <!-- 圓圈指示符 --> <ol class="carousel-indicators">  <li data-slide-to="0" data-target="#carousel-container"></li>  <li data-slide-to="1" data-target="#carousel-container"></li>  <li data-slide-to="2" data-target="#carousel-container" class="active"></li> </ol> <!-- 左右控制按鈕 --> <a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div>

帶有data-ride="carousel"的div就是輪播外掛程式的容器，容器id為carousel-container，稍後會用到。

還有兩個樣式，其中carousel樣式做樣式容器，而slide樣式和fade類似，用來定義輪播圖片的時候是否有特效.

 

1. carousel-inner樣式div內部包含多個含有item的div樣式，在 這些內部的div裡，定義我們要顯示的幻燈圖片。
2. carousel-indicators樣式ol內部定義了一組標示符，使用者單 擊這些標示符可以直接顯示相應的圖片,data-slide-to是索引,從0開始.
3. 另外兩個a連結是一組，用於顯示左右箭頭，可以改變輪播的方向。這兩個元素上定義的data-slide屬性值只能是 prev或者next

針對圖片，輪播外掛程式還提供了一個字幕說明樣式（carousel-caption），緊接著img元素定義即可。樣本如下

<div class="item active">    <img src="..." alt="..." />    <div class="carousel-caption">     <h3>標題</h3>     <p>描述...</p>    </div>  </div>

 

定位浮標

源檔案：affix.js

 

Affix的效果就像其官方網站左邊的導航連結一樣。

<!—或者分開設定offset -- >

<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >導航內容 </div>

<!—合并設定offset -- >

<div data-spy="affix" data-offset="60" >導航內容</div>

 

data-offset-top表示一個完整的新網頁，從頂部向下拖動捲軸（也就是網頁向上滾動）這個像素以後,

而data-offset-bottom則表示距離最底部還有多少距離（本例60像素）以後，就要開始繼續滾動了.

Bootstrap JavaScript外掛程式