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="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)
}
Bootstrap源码分析之nav、collapse的更多相关文章
- Bootstrap源码分析系列之初始化和依赖项
在上一节中我们介绍了Bootstrap整体架构,本节我们将介绍Bootstrap框架第二部分初始化及依赖项,这部分内容位于源码的第8~885行,打开源码这部分内容似乎也不是很难理解.但是请站在一个开发 ...
- Appium Android Bootstrap源码分析之启动运行
通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...
- Appium Android Bootstrap源码分析之命令解析执行
通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...
- Appium Android Bootstrap源码分析之控件AndroidElement
通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...
- Bootstrap源码分析系列之整体架构
作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...
- Bootstrap源码分析之dropdown
源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...
- BOOtstrap源码分析之 tooltip、popover
一.tooltip(提示框) 源码文件: Tooltip.jsTooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.wid ...
- bootstrap源码分析之scrollspy(滚动侦听)
源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项2.导航必须是 .nav > li > a 结构,并且a ...
- Appium Android Bootstrap源码分析之简介
在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...
随机推荐
- Symfony2模版引擎使用说明手册
一.基本使用 {{ demo }}输出一个demo变量; {% func %}通常是包含一个twig函数例如 for; 举个for循环的例子: {% for i in 0..10 %} <em& ...
- 【Discuz】关闭QQ互联插件提示信息:系统繁忙,请稍后再试
版本:X3.2.20160601 提示信息 系统繁忙,请稍后再试 解决方案 Step1.删除QQ互联插件目录 网站的根目录\source\plugin\qqconnect Step2.上传原始QQ互联 ...
- eclipes创建一个web项目web.xml不能自动更新的原因(web.xml和@WebServlet的作用)
在eclipse中创建一个Web项目的时候,虽然有web.xml生成,但是再添加Servlet类文件的时候总是看不见web.xml的更新,所以异常的郁闷!上网查了查,原来我们在创建Web项目的时候,会 ...
- C++中typename关键字的用法
我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. C++中typename关键字的用法
- JAVA 设计模式 观察者模式
用途 观察者模式 (Observer) 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象. 这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观 ...
- 第21/24周 性能监控(PAL工具)
大家好,欢迎来到性能调优培训的最后一个月.在过去的5个月里,我们谈了SQL Server的各种性能相关的话题,包括性能调优的技术和问题. 但当在你面前,SQL Server没有按你预想的运行时,你会怎 ...
- 用Latex写学术论文:作者(Author)&摘要(Abstract)
标题&作者 1.标题 \title{} "Line breaks (\\) may be used to equalize the length of the title lines ...
- [UWP]涨姿势UWP源码——极简的RSS阅读器
涨姿势UWP,一个开源的RSS阅读器,一个纯粹的项目,一个有道德的APP,一个脱离了低级趣味的作者,一些有益于人民的代码.骚年,还等什么,来涨点姿势吧! 该项目代码可能会引起部分人群的不适,敏感人群请 ...
- 【原创】Django-ORM进阶
基础部分已经写完:[原创]Django-ORM基础 以下部分将对表与表之间的关联操作做以介绍 models.py #_*_coding:utf-8_*_ from django.db import m ...
- python生成随机密码
有时候我们会想生成一个随机密码,这样我们通过Python中的一些随机方法,就可生成我们任意长度和复杂度的密码,代码如下: # -*- coding=utf-8 -*- import random im ...