bootstrap學習筆記 外掛概述

浪花一朵朵發表於2015-05-25

Bootstrap外掛概覽

在前面佈局元件章節中所討論的元件僅僅是個開始。Bootstrap自帶的12種jQuery外掛,擴充套件了功能,可以給站點新增更多的互動。即使您不是一名高階的js開發人員,

你也可以學習Bootstrap的js外掛。利用Bootstrap資料api(Bootstrap Data API),大部分的外掛可以在不編寫任何程式碼的情況被觸發。

站點引用bootstrap外掛的方式有兩種:

單獨引用:使用Bootstrap的個別的*.js檔案。一些外掛和css元件依賴於其他外掛。如果您單獨引用外掛,請先確保弄清楚這些外掛之間的依賴關係。

編譯(同時)引用:使用Bootstrap.js或壓縮版的bootstrap.min.js

不要嘗試同時引用這兩個檔案,因為bootstrap.js和bootstrap.min.js都包含了所有的外掛。

所有的外掛依賴於jQuery。所以必須在外掛檔案之前引用jQuery.請訪問bower.json.檢視boostrap當前支援的jQuery版本。

data屬性

你可以僅僅通過data屬性API就能使用所有的bootstap外掛,無需寫一行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')

所有的方法都可以接受一個可選的選項作為引數,或者一個代 ,表特定的方法的字串,或者不帶引數(這種情況下,將會初始外掛為預設行為),如下所示

$('#myModel').modal();

//初始化不支援鍵盤

$('myModel').model({keyborad:false})

初始化並立即呼叫 show

$('#myModel').modal('show')

每個外掛在Constructor屬性上也暴露了其原始的建構函式:$.fn.popover.Constructor.如果你想獲取某個特定外掛的例項,可以直接通過頁面元素獲取

$('[rel=popover]').data('popover').

避免名稱空間衝突

某些時候Bootstrap外掛可能需要與其他ui框架一起使用.中這種情況下,可能會發生名稱空間衝突。如果不幸發生了這種情況,你可以通過呼叫外掛的

.noconflict方法恢復其原始值。

var bootstrapButton=$.fn.button.noConflict();

//為$().bootstrapBtn賦予Bootstrap功能

$.fn.bootstrapBtn=bootstrapButton

事件

Bootstrap為大多數外掛的獨特行為提供了自定義事件。一般來說,這些事件有兩種形式

動詞不定式:這會在事件開始時被觸發。例如ex:show.動詞不定式事件提供了preventDefault功能。這使得事件開始前可以停止操作的執行。

$('#myModel').on('show.bs.model',function(e)

  //阻止模態框的顯示

     if(!data)return e.preventDefault();

過去分詞形式:這會在動作執行完畢之後被觸發。

)

相關文章