全面解析Bootstrap中nav、collapse的使用方法

全面解析Bootstrap中nav、collapse的使用方法

一、导航分析（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="collapshttp://e"][data-parent="' + this.options.parent + '"]')

.each($.proxy(function (i, element) {

var $element = $(element)

this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)

}, this))

.end()

3、Praent的实现，还需要整合.panehttp://l类，因为查找时认为所有子列表都是放在.panel类下的

4、jquery的end（）方法：结束当前筛选链，并将匹配元素集还原为之前的状态（链开始的位置）

$(“p”).find(‘.bak').find(‘span').end()：还原到$(“p”)

5、scrollHeight：页面的高度（获取为要展开的实际高度/宽度YuSuAIZhId），包含视窗不可见的部分，在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)

}

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。