bootstrap.js學習筆記

模態彈出框

Bootstrap框架中的模態彈出框，分別運用了「modal」、「modal-dialog」和「modal-content」樣式，而彈出窗真正的內容都放置在「modal-content」中，其主要又包括三個部分：

  ☑ 彈出框頭部，通常使用「modal-header」表示，主要包括標題和關閉按鈕

  ☑ 彈出框主體，通常使用「modal-body」表示，彈出框的主要內容

  ☑ 彈出框腳部，通常使用「modal-footer」表示，主要放置操做按鈕

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模態彈出窗標題</h4>
            </div>
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

模態彈出窗在頁面加載完成時，是被隱藏在頁面中的，只有經過必定的動做（事件）才能觸發模態彈出窗的顯示。在Bootstrap框架中實現方法有2種，接下來分別來介紹這2種觸發模態彈出窗的使用方法。

方法一：模態彈出窗聲明，只須要自定義兩個必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發方法通常依賴於這些自定義的data-xxx 屬性。好比data-toggle="" 或者 data-dismiss=""）

方法二：觸發模態彈出窗也能夠是一個連接<a>元素，那麼可使用連接元素自帶的href屬性替代data-target屬性

可經過給「.modal」增長類名「fade」爲模態彈出框增長一個過渡動畫效果。

經過js觸發：

$(".btn").click(function(){
    $("#mymodal").modal();
  });

下拉菜單

被點擊的菜單項連接或按鈕須要添加自定義屬性 data-toggle="dropdown"

實現下拉菜單原理：

Dropdown插件加載時，對全部帶 有「data-toggle=dropdown」樣式的元素綁定了事件，用戶單擊帶有「data-toggle=dropdown」樣式的連接或按鈕時， 會觸發JavaScript事件代碼。當用戶點擊帶有「data-toggle=dropdown」樣式的連接或按鈕時，下拉菜單的父容器會添加一個open類名，此時下拉菜單顯示；再次單擊時，JavaScript會刪除剛添加的open類 名，此時下拉菜單將隱藏。

若是觸發下拉菜單的元素是一個連接元素，爲了不點擊連接，頁面跳到頂部，可使用data-target="#"來替代href="#"：

和模態彈出窗同樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發下拉菜單顯示。使用JavaScript觸發下拉菜單和聲明式原理是基本相似的，不一樣的是使用JavaScript方法能夠按照本身的方式省略一些元素或者樣式。

$(function(){
    $(".dropdown-toggle").dropdown();
})

選項卡

 一、選項卡導航連接中要設置 data-toggle="tab"

  二、而且設置 data-target="對應內容面板的選擇符(通常是ID)";

     若是是連接的話，還能夠經過 href="對應內容面板的選擇符(通常是ID)"

     主要起的做用是用戶點擊的時候能找到該選擇符所對應的面板內容 tab-pane。

  三、面板內容統一放在 tab-content 容器中，並且每一個內容面板 tab-pane 都須要設置一個獨立的選擇符（最好是ID）與選項卡中的data-target 或 href 的值匹配。

在Bootstrap除了可讓 nav-tabs 具備選項卡的切換功能以外，還能夠對膠囊式 nav-pills 導航也具備選項卡的功能。咱們只須要將 nav-tabs 換成 nav-pills，另外關鍵一點是將 data-toggle="tab"換成data-toggle="pill"。

不過即使不換也能夠，js中自動添加了此機制。

js方法調用

在每一個連接的單擊事件中調用tab("show")方法，顯示對應的標籤面板內容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，而後經過下面的腳原本調用：

 $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });

提示框

在Bootstrap框架中的提示框，結構很是簡單，經常使用的是按鈕<button>標籤或者連接<a>標籤來製做。不論是使用按鈕仍是連接來製做提示框，他們都有一個共性：

• 經過 title 屬性的值來定義提示信息(也可使用自定義屬性 data-original-title 來設置提示信息)。

• 經過 data-placement 自定義屬性來控制提示信息框的位置，根據四種不一樣的位置，data-placement具備四個值：top、right、bottom和left，分別表示提示框出現的位置在頂部、右邊、底部和左邊。

• 還有一個最重要的參數不可缺乏，data-toggle="tooltip"。

例：

<button type="button" 
        class="btnbtn-default" 
        data-toggle="tooltip" 
        data-placement="left" 
        data-original-title="提示框居左">
        提示框居左
</button>

觸發方式

$(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

除此以外，也能夠單獨指定一個元素，在該元素上調用提示框，而且可能經過JavaScript的各類參數來實現，無需定義一些 data 屬性，如：

$('#myTooltip').tooltip({
       title:"我是一個提示框，我在頂部出現",
       placement:'top'
    });

提示框還有許多自定義屬性以及js參數，在此再也不贅述。

彈出框中HTML自定義的 data 屬性和提示框中的自定義的 data 屬性基本相同，只不過在其基礎上增長了一個 data-content 屬性，用來設置彈出框的內容。其實兩插件也有略微的不一樣：

• 提示框 tooltip 的默認觸發事件是 hover 和 focus，而彈出框 popover 是 click

• 提示框 tooltip 只有一個內容(title)，而彈出框不只能夠設置標題（title）還能夠設置內容(content)

警告框

若是經過自定義的HTML屬性（聲明式）來觸發警告框，須要在關閉按鈕上設置自定義屬性data-dismiss="alert"

<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操做成功！</p>
</div>

關閉按鈕，不必定非要用X號，也能夠是普通的按鈕元素或者連接元素，只須要保證關閉元素帶有自定義屬性data-dismiss="alert"便可

js方式

$("#close").on("click",function(){        $(this).alert("close");
    });

按鈕狀態：

經過按鈕能夠設計狀態提示，當單擊按鈕時，會顯示loading狀態信息。例如，點擊「加載」按鈕，會觸發按鈕的加載的狀態。以下所示：

<button class="btnbtn-primary" data-loading-text="正在加載中,請稍等..." type="button" id="loaddingBtn">加載</button>

經過data-loading-text屬性定義加載的文本信息，而後經過JavaScript給按鈕綁定一個事件，並給按鈕添加一個button("loading")方法來激活按鈕的加載狀態行爲。以下所示：

$(function(){
    $("#loaddingBtn").click(function () {
        $(this).button("loading");
      });
});

單選按鈕

模擬單選擇按鈕是經過一組按鈕來實現單選擇操做。使用按鈕組來模擬單選按鈕組，可以讓設計更具個性化，能夠定製出更美觀的單選按鈕組。
在Bootstrap框架中按鈕插件中，能夠經過給按鈕組自定義屬性data-toggle="buttons"，以下所示：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>

複選按鈕

使用按鈕組來模擬複選按鈕和模擬單選按鈕是同樣的，具備同等效果，也是經過在按鈕組上自定義data-toggle="buttons"來實現。惟一不一樣的是，將input[type="radio"]換成input[type="checkbox"]。

手風琴

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">標題一</a></h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">標題一對應的內容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">標題二</a></h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">標題二對應的內容</div>
        </div>
    </div>
</div>

簡單點就是一個觸發器和一個摺疊區：

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">觸發器</button>
<div id="demo" class="collapse in">摺疊區</div>

觸發手風琴能夠經過自定義的 data-toggle 屬性來觸發。其中data-toggle值設置爲 collapse，data-target="#摺疊區標識符"。

爲了把標題和內容區捆綁在一塊兒，能夠經過錨連接的方法，把標題區域和麪板區連在一塊兒

控制面板內容區是否可視。在Bootstrap框架中，若是你想讓內容區域不可視，只須要在 panel-collapse 樣式上添加 collapse：

每一個面板的內容區都被隱藏起來了，變成不可視，但有時候但願默認第一個面板內容是可視的，須要怎麼辦？其實Bootstrap做者早就爲你們作了這方面的考慮，你只須要在collapse基礎上再追加 in樣式：

激活手風琴交互行爲。要完成交互行爲，須要在標題連接中自定義兩個屬性，一個是data-toggle，而且取值爲collapse；另外一個是data-target，取值爲各個面板內容區的標識符，好比說ID

，定義data-parent屬性，實現點擊一個其中一個元素時，關閉全部的摺疊區，再打開所單擊的區域（若是所單擊區域是展現的，則會關閉）。這個data-parent取值與手風琴面板容器的標識符相匹配

固定定位

Affix 插件能夠對任何元素進行固定定位，其中比較簡單的方法，就是經過自定義屬性 data 來觸發。其主要包括兩個參數：

一、data-spy：取值 affix，表示元素固定不變的。

二、data-offset：整數值，好比 90，表示元素 top 和 bottom 的值都是 90px，其包括兩種方式：data-offset-top 和 data-offset-bottom。

• data-offset-top 用來設置元素距離頂部的距離。好比 90，表示元素距離頂部 90px，當用戶從頂部向下拖動滾動條，當滾動的距離大於 90px 時，affix 元素再也不滾動，就會固定在瀏覽器窗口頂部。

• data-offset-bottom 恰好與 data-offset-top 相反。

具體使用以下：

<div data-spy="affix" data-offset="90">affix元素</div>

分開設置 data-offset 值方式：

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>

咱們來看一個簡單的示例：

<nav class="navbar navbar-default" role="navigation">
    …
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-3" id="sidebarMenu">
            <ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20">
                     …
            </ul>
        </div>
        <div class="col-md-9">
                …
        </div>
    </div>
</div>

注意，在 body 要聲明滾動監控。

<body data-spy="scroll" data-target="sidebarMenu">