淺談bootstrap源碼分析之tab(選項卡)

實現tab選項卡的應用，此插件相對比較簡單

源碼文件：

tab.js

實現原理

1、單擊一個元素時，首先將原來高亮的元素取消

2、然後給被單擊元素進行高亮

3、如果單擊元素是下拉框中某個選項，則選中本身，還要選中下拉框

5、如果定義了動畫，先執行動畫，然後回調

源碼分析：

1、Show方法，是在單擊一個元素的時候觸發，會觸發如下四個事件

1.1、Hiden.bs.tab：隱藏上一個元素

1.2、Show.bs.tab：顯示當前元素

1.3、Hideen.bs.tab：隱藏上一個元素完成

1.4、Shown.bs.tab：顯示當前元素完成

1.5、Hiden/show事件源碼：

 var $previous = $ul.find('.active:last a') var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $this[0] }) var showEvent = $.Event('show.bs.tab', { relatedTarget: $previous[0]})

2、Active：激活當前對象

2.1、對導航元素增加aria-expanded屬性，標記此元素是否處於展開狀態

2.2、利用reflow機制，用獲取offsetWidth屬性來實現部分重繪

以上這篇淺談bootstrap源碼分析之tab(選項卡)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。