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(选项卡)的更多相关文章
- 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源码分析系列之初始化和依赖项
在上一节中我们介绍了Bootstrap整体架构,本节我们将介绍Bootstrap框架第二部分初始化及依赖项,这部分内容位于源码的第8~885行,打开源码这部分内容似乎也不是很难理解.但是请站在一个开发 ...
- 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 ...
- Appium Android Bootstrap源码分析之简介
在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...
- bootstrap源码分析之Carousel
源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分 1. ...
随机推荐
- hdu4292Food(最大流Dinic算法)
/* 题意:每一个人都有喜欢的吃的和喝的,每一个人只选择一个数量的吃的和一个数量的喝的,问能满足最多的人数!? 思路:建图很是重要!f-food, p-people, d-drink 建图: 0(源点 ...
- Unity3D Player角色移动控制脚本
1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position.之前写过类似的文章,这次增加了平时常用API的脚本,每个脚本均手打测试可用. 2. ...
- RobotFramework - Tips
1 --- API的使用 Robot Framework的版本发展是向下包容,建议尽量使用robot本身的API. 例如:通过导入logger.py(...\Lib\site-packages\rob ...
- Network - SSH
SSH(Secure Shell) https://wiki.wireshark.org/SSH SSH 协议与OpenSSH详解 http://my.oschina.net/liting/blo ...
- javascript学习—理解addLoadEvent函数
onload事件是HTML DOM Event 对象的一个属性,又叫事件句柄(Event Handlers),它会在页面或图像加载完成后(注意是加载完成后)立即发生. window.onload = ...
- android gridview几个重要属性(android:listSelector自带内部padding分析)
一.android:scrollbarStyle 决定状态条的位置 常用属性outsideOverlay,滚动条在最外层,gridview设置的padding在滚动条的内侧 二.andr ...
- redis学习教程之一基本命令
参阅redis中文的 互动教程(interactive tutorial)来学习的. 目录: 全局操作 get get incr 自增 del 删除 expire 定时 list 队列 set ...
- JAVA 设计模式 中介者模式
用途 中介者模式 (Mediator) 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 中介者模式是一种行为型模式. 结 ...
- SQL Server代理(1/12):配置和概况
SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. SQL Server代理是SQL Serv ...
- Android Studio快捷键每日一练(3)
原文地址:http://www.developerphil.com/android-studio-tips-of-the-day-roundup-3/ 23.启停用断点 苹果:Cmd+F8 Wi ...