IT工程師數位筆記本

前面的話

　　Bootstrap除了包含豐富的Web組件之外，如下拉菜單、按鈕組、導航、分頁等，還包括一些JavaScript的插件。插件為 Bootstrap 的組件賦予了“生命”。Bootstrap的JavaScript插件可以單獨導入到頁面中，也可以一次性導入到頁面中。因為在Bootstrap中的JavaScript插件都是依賴于jQuery庫，所以不論是單獨導入還一次性導入之前必須先導入jQuery庫。本文將介紹Bootstrap插件概述

導入

【一次性導入】

　　Bootstrap提供了一個單一的文件，這個文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（壓縮版本：bootstrap.min.js）

【單獨導入】

　　為方便單獨導入特效文件，Bootstrap提供了12種JavaScript插件，他們分別是：

　　☑ 動畫過渡（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”

data屬性

　　可以僅僅通過 data 屬性 API 就能使用所有的 Bootstrap 插件，無需寫一行 JavaScript 代碼。這是 Bootstrap 中的一等 API，也應該是首選方式。

　　話又說回來，在某些情況下可能需要將此功能關閉。因此，還提供了關閉 data 屬性 API 的方法，即解除以 data-api 為命名空間并綁定在文檔上的事件。就像下面這樣：

$(document).off('.data-api')

　　另外，如果是針對某個特定的插件，只需在 data-api 前面添加那個插件的名稱作為命名空間，如下：

$(document).off('.alert.data-api')

API

　　Bootstrap為所有插件提供了純 JavaScript 方式的 API。所有公開的 API 都是支持單獨或鏈式調用方式，并且返回其所操作的元素集合，和jQuery的調用形式一致

$('.btn.danger').button('toggle').addClass('fat')

　　所有方法都可以接受一個可選的 option 對象作為參數，或者一個代表特定方法的字符串，或者什么也不提供（在這種情況下，插件將會以默認值初始化）

$('#myModal').modal()                      // 以默認值初始化
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // 初始化后立即調用 show 方法

　　每個插件還通過 Constructor 屬性暴露了其原始的構造函數：$.fn.popover.Constructor。如果想獲取某個插件的實例，可以直接通過頁面元素獲取：$('[rel="popover"]').data('popover')

【默認設置】

　　每個插件都可以通過修改其自身的 Constructor.DEFAULTS 對象從而改變插件的默認設置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 將模態框插件的 `keyboard` 默認選參數置為 false

【避免命名空間沖突】

　　某些時候可能需要將 Bootstrap 插件與其他 UI 框架共同使用。在這種情況下，命名空間沖突隨時可能發生。如果不幸發生了這種情況，可以通過調用插件的 .noConflict 方法恢復其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說，這些事件都有不定式和過去式兩種動詞的命名形式，例如，不定式形式的動詞（例如 show）表示其在事件開始時被觸發；而過去式動詞(如shown)表示在動作執行完畢之后被觸發。

　　所有 Bootstrap 事件的名稱都采用命名空間方式。所有以不定式形式的動詞命名的事件都提供了 preventDefault 功能。這就賦予在動作開始執行前將其停止的能力

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模態框的展示
})

過渡效果

　　Bootstrap框架默認給各個組件提供了基本動畫的過渡效果，如果要使用，有兩種方法：

　　☑ 調用統一編譯的bootstrap.js；

　　☑ 調用單一的過渡動畫的JavaScript插件文件transition.js

　　transition.js文件為Bootstrap具有過渡動畫效果的組件提供了動畫過渡效果。不過需要注意的是，這些過渡動畫都是采用CSS3來實現的，所以IE6-8瀏覽器是不具備這些過渡動畫效果

　　默認情況之下，Bootstrap框架中以下組件使用了過渡動畫效果：

　　☑ 模態彈出窗（Modal）的滑動和漸變效果；

　　☑ 選項卡（Tab）的漸變效果；

　　☑ 警告框（Alert）的漸變效果；

　　☑ 圖片輪播（Carousel）的滑動效果

　　transition.js 是針對 transitionEnd 事件的一個基本輔助工具，也是對 CSS 過渡效果的模擬。它被其它插件用來檢測當前瀏覽器對是否支持 CSS 的過渡效果

　　通過下面的代碼可以在全局范圍禁用過渡效果，并且必須將此代碼放在transition.js(或bootstrap.js或bootstrap.min.js)后面，確保在js文件加載完畢后再執行下面代碼

$.support.transition = false