《玩轉Bootstrap（JS插件篇）》筆記

導入JavaScript插件

不論是單獨導入還一次性導入之前必須先導入jQuery庫。

• 一次性導入
  <script src="js/bootstrap.min.js"></script>

• 單獨導入，可到github去下載
  動畫過渡（Transitions）: transition.js
  模態彈窗（Modal）: modal.js
  下拉菜單（Dropdown）： dropdown.js
  滾動偵測（Scrollspy）： scrollspy.js
  選項卡（Tab）： tab.js
  提示框（Tooltips）： tooltop.js
  彈出框（Popover）： popover.js
  警告框（Alert）： alert.js
  按鈕（Buttons）： button.js
  折疊/手風琴（Collapse）： collapse.js
  圖片輪播Carousel： carousel.js
  自動定位浮標Affix： affix.js

動畫過渡

都是采用CSS3來實現的，所以IE6-8瀏覽器是不具備這些過渡動畫效果。
默認情況之下，Bootstrap框架中以下組件使用了過渡動畫效果：

1. 模態彈出窗（Modal）的滑動和漸變效果；
2. 選項卡（Tab）的漸變效果；
3. 警告框（Alert）的漸變效果；
4. 圖片輪播（Carousel）的滑動效果。

模態彈出框

模態彈出框統一稱為 Modal

• 結構分析
  分別運用了modal、modal-dialog和modal-content樣式
  彈出窗真正的內容都放置在modal-content中，其主要又包括三個部分：
  1 彈出框頭部，一般使用modal-header表示，主要包括標題和關閉按鈕
  2 彈出框主體，一般使用modal-body表示，彈出框的主要內容
  3 彈出框腳部，一般使用modal-footer表示，主要放置操作按鈕

• 實現原理解析
  bootstrap中的“模態彈出框”有以下幾個特點：
  1、模態彈出窗是固定在瀏覽器中的。
  2、模態彈出窗寬度是自適應的，而且modal-dialog水平居中。
  3、當瀏覽器視窗大於768px時，模態彈出窗的寬度為600px。

• 尺寸選擇
  modal-lg大尺寸
  modal-sm小尺寸（默認）

• 觸發模態彈出窗2種方法
  1、模態彈出窗聲明，只需要自定義兩個必要的屬性：data-toggle（必須為modal）和data-target（ID值）
  2、觸發模態彈出窗也可以是一個鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性
  不過建議還是使用統一使用data-target的方式來觸發。

• 為彈出框增加過度動畫效果
  可通過給.modal增加類名fade為模態彈出框增加一個過渡動畫效果。

• data參數說明

屬性名稱	類型	默認值	描述
data-toggle	字符	modal	必須且為modal，用來控制模態彈出窗的顯示
data-target	字符	用戶自己定義	必須，定義要觸發的彈出窗是哪一個。其值可以div.modal元素獨有類名，或ID值
data-backdrop	布爾值	true	是否包含一個背景div元素，如果為true，則單擊該背景時關閉彈出窗，如果取值為static，則單擊背景div時不會關閉
data-keyboard	布爾值	true	按鍵盤的ESC鍵可以關閉彈出窗。如果值為false，則不會關閉
data-show	布爾值	true	初始化時，彈出窗是否顯示
href	URL路徑	空值	如果通過a元素觸發模態彈出窗，其href值不是一個以#開頭的值，則表示是一個url地址，模態彈出窗先加載其內容，然后替換原有的modal-content中的內容。如果href設置了地址，那么data-target則必須填寫制定ID值

• JavaScript觸發
  反轉(如果當前為顯示，則將其關閉；如果為關閉，則將其顯示)：$("#themodal").modal("toggle");
  顯示：$("#themodal").modal("show");
  關閉：$("#themodal").modal("hide");

• JavaScript觸發時的參數設置

$(function () {
    $(".btn").click(function () {
        $("#mymodal").modal({
            backdrop: false, // 相當於data-backdrop
            keyboard: false, // 相當於data-keyboard
            show: true, // 相當於data-show
            remote: "" // 相當於a標簽的href
        });
    });
});

• JavaScript觸發時的事件
  模態彈出窗支持四種類型的事件，分別是模態彈出窗的彈出前、彈出后，關閉前、關閉后

事件類型	描述
show.bs.modal	在show方法調用時立即觸發（尚未顯示之前）；如果單擊了一個元素，那么該元素將作為事件relatedTarget事件
shown.bs.modal	該事件在模態窗完全顯示給用戶之后（並且等CSS動畫完成之后）觸發；如果單擊了一個元素，那么該元素將作為事件relatedTarget事件
hide.bs.modal	在hide方法調用時（但還未關閉隱藏）立即觸發
hidden.bs.modal	該事件在模態彈出窗完全隱藏之后（並CSS動畫漂亮完成之后）觸發

$('#myModal').on('hidden.bs.modal', function (e) {
    // 處理代碼...
})

• 示例

<!-- data-toggle必須為modal -->
<!-- data-target為div.modal元素獨有類名，或ID值 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" data-backdrop="static" data-keyboard="false" type="button">通過data-target觸發</button>
<!-- 模態彈出窗，由modal、modal-dialog和modal-content組成 -->
<!-- modal-lg大尺寸，還有modal-sm -->
<!-- fade彈出框過度動畫效果 -->
<div class="modal fade modal-lg" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- modal-header彈出框頭部 -->
            <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>
            <!-- modal-body彈出框主體 -->
            <div class="modal-body">
                <p>模態彈出窗主體內容</p>
            </div>
            <!-- modal-footer彈出框腳部 -->
            <div class="modal-footer">
                <!--  data-dismiss="modal"關閉模態彈出窗 -->
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>