实现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(选项卡)的更多相关文章

  1. Appium Android Bootstrap源码分析之启动运行

    通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...

  2. Appium Android Bootstrap源码分析之命令解析执行

    通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...

  3. Appium Android Bootstrap源码分析之控件AndroidElement

    通过上一篇文章<Appium Android Bootstrap源码分析之简介>我们对bootstrap的定义以及其在appium和uiautomator处于一个什么样的位置有了一个初步的 ...

  4. Bootstrap源码分析系列之初始化和依赖项

    在上一节中我们介绍了Bootstrap整体架构,本节我们将介绍Bootstrap框架第二部分初始化及依赖项,这部分内容位于源码的第8~885行,打开源码这部分内容似乎也不是很难理解.但是请站在一个开发 ...

  5. Bootstrap源码分析系列之整体架构

    作为一名合格的前端工程师,你肯定听说过Bootstarp框架.确实可以说Bootstrap框架是最流行的前端框架之一.可是也有人说Bootstrap是给后端和前端小白用的,我认为只要学习它能给我们前端 ...

  6. Bootstrap源码分析之dropdown

    源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...

  7. BOOtstrap源码分析之 tooltip、popover

    一.tooltip(提示框) 源码文件: Tooltip.jsTooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.wid ...

  8. Appium Android Bootstrap源码分析之简介

    在上一个系列中我们分析了UiAutomator的核心源码,对UiAutomator是怎么运行的原理有了根本的了解.今天我们会开始另外一个在安卓平台上基于UiAutomator的新起之秀--Appium ...

  9. bootstrap源码分析之Carousel

    源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1. ...

随机推荐

  1. 如何配置pom.xml用maven打包java工程

    最近由于项目需要,研究了一下maven的打包,项目要做到 1,生成3个目录/lib,/conf,/bin目录 2,把所有的jar目录编译.拷贝到/lib目录(包括maven的jar包和lib目录下的j ...

  2. BeanFactory vs ApplicationContext

    <ref:https://techythought.wordpress.com/2013/01/12/92/>

  3. JSON格式转换(javascript)

    使用ajax从后台抓取数据后,如果有多个值,可以使用json传值. ajax例子如下,在返回的类型里面,可以是文本型(text),JSON格式(json),超文本类型(html),XML文件类型(xm ...

  4. xmpp即时通讯的笔记(摘抄)

    xmpp的使用: 即时通讯 instant messaging(IM) :  -->实时收发信息! 即时通讯相关软件: **QQ,MSN,GoogleTalk,AIM,Jabber(XMPP别名 ...

  5. 【PHP操作sphinx】

    [index.php] [find.php] <?php header("Content-type:text/html;charset=utf-8"); $keyword = ...

  6. modernizer的意义

    modernizer是一个js文件,会检查当前的浏览器支持什么特性,就在Html标签上添加什么类,然后如果不支持添加no-xxx类,这样,就可以针对两种情况写两种css. http://blog.ch ...

  7. linux下的deb/rpm文件的说明和安装方法

    1.    deb 是 ubuntu .debian 的格式.    rpm 是 redhat .fedora .suse 的格式. 他们不通用(虽然可以转换一下). deb是debian发行版的软件 ...

  8. linux创建git远程仓库

    root用户 ============================ // 创建用户 >adduser newuser // 修改用户的密码 >passwd newuser // 设置权 ...

  9. thinkphp3.2.3 成功对接支付宝接口

    一.首先下载支付宝官方接口,下载地址: https://b.alipay.com/order/productDetail.htm?productId=2012111200373124&tabI ...

  10. 让PV10000+的秘诀

    原文地址:http://www.phonegap100.com/article-410-1.html 让PV10000+的秘诀 2015-5-4 21:49| 发布者: admin| 查看: 122| ...