Bootstrap原始碼分析之nav、collapse

小龍女先生發表於2016-05-21
boot原始碼

導航分析（nav)：

原始碼檔案：
_navs.scss：導航模組
Mixins/_nav-divider.scss：分隔線
Mixins/_nav-vertical-align.scss：垂直對齊

1、只是用css進行了樣式修飾，對Js沒有任何依賴
2、導航模組可以包含下拉模組
3、實現了水平、垂直、水平平均分配（table-cell實現，4.0移除）、tabs、膠囊等樣式
4、Nav-divider：有一個畫素的高度實現分隔線
5、Nav-stacked：垂直對齊實現
6、提供了tab-content類，用於包裹tab，然後tab-pane做為內容區域，用於tab頁的擴充套件
7、Nav-tabs下的dropdown做了位置向上收縮一個畫素的處理，因為nav-tabs會一條底線，不向上收縮一個畫素，會有空白間隙出現

// Specific dropdowns
.nav-tabs .dropdown-menu {
  // make dropdown border overlap tab border
  margin-top: -1px;
  // Remove the top rounded corners here since there is a hard edge above the menu
  @include border-top-radius(0);
}

摺疊效果(collapse)：

原始碼檔案：
Mixins/_component-animations.scss：collapse實現，實現摺疊效果
Javascripts/bootstrap/collapse.js：摺疊效果實現

1、$this.data()收集所有data-*資料
2、Parent屬性：指定當前這個collapse被那個父級所控制，主要實現一控多的效果，以下是隱藏同一父級下所有子列表程式碼：

return $(this.options.parent)
      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
      .each($.proxy(function (i, element) {
        var $element = $(element)
        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
      }, this))
      .end()
3、Praent的實現，還需要整合.panel類，因為查詢時認為所有子列表都是放在.panel類下的
4、Jquery的end（）方法：結束當前篩選鏈，並將匹配元素集還原為之前的狀態（鏈開始的位置）
$(“p”).find(‘.bak’).find(‘span’).end()：還原到$(“p”)
5、scrollHeight：頁面的高度（獲取為要展開的實際高度/寬度），包含視窗不可見的部分，在collapse中用於識別要展開的最大值，在運動完成後都會對height/widht清空處理
var scrollSize = $.camelCase(['scroll', dimension].join('-'))
    this.$element
      .one('bsTransitionEnd', $.proxy(complete, this))
      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
6、對處理元素分為兩類，一是要展開或隱藏的元素本身（$element），二是觸發展開或隱藏元素的按鈕（$trigger）
7、在hiden方法中，會重繪摺疊區域的高度，然後獲取實際區域的高度：
this.$element[dimension](this.$element[dimension]())[0].offsetHeigh
8、Hiden方法的觸發預設情況下都是通過show方法中的判斷觸發的：
if (actives && actives.length) {
    Plugin.call(actives, 'hide')
      activesData || actives.data('bs.collapse', null)
    }

相關文章