Bootstrap tabs 源码分析
前言:
阅读建议:去github下载一个完整dom然后把,本篇代码复制进去然后运行就好了以地址
tab组件是非常简单的一种组件,因为这是一个系列,所以就顺便看了,其实它写的这个还算不错的,很有条例,也算是插件的规范写法,研究一下也不错
/* ========================================================================
* Bootstrap: tab.js v3.3.7
* http://getbootstrap.com/javascript/#tabs
* ========================================================================
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */ +function ($) {
'use strict'; // TAB CLASS DEFINITION
// ==================== var Tab = function (element) {//传入一个选择器
// jscs:disable requireDollarBeforejQueryAssignment
this.element = $(element)
// jscs:enable requireDollarBeforejQueryAssignment
} Tab.VERSION = '3.3.7' Tab.TRANSITION_DURATION = 150 Tab.prototype.show = function () {
var $this = this.element//把a标签赋值给$this
var $ul = $this.closest('ul:not(.dropdown-menu)')//closest 仅供插件开发者使用的方法,jquery1.7后就不建议使用了 冲a标签处向上寻找ul包裹元素
var selector = $this.data('target')//取出target if (!selector) {//没有target的话,
selector = $this.attr('href')//把当前触发的a标签的某点,付给他
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
} if ($this.parent('li').hasClass('active')) return//发现已经时active了,则返回,没有泽继续向下执行 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]
}) $previous.trigger(hideEvent)
$this.trigger(showEvent) if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return var $target = $(selector) this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: $previous[0]
})
})
} Tab.prototype.activate = function (element, container, callback) {
var $active = container.find('> .active')//得到先前li.active
var transition = callback
&& $.support.transition
&& ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length) function next() {
$active
.removeClass('active')//把原来的active去除
.find('> .dropdown-menu > .active')
.removeClass('active')//在把menu下拉菜单下的active去掉
.end()//退到上一层
.find('[data-toggle="tab"]')//寻找他下面的a标签,
.attr('aria-expanded', false)//aria-expanded 属性赋值为false element
.addClass('active')//给当前触发的li负上active
.find('[data-toggle="tab"]')//找到地下a标签
.attr('aria-expanded', true)//赋值为true if (transition) {//有毁掉函数的时候
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
} if (element.parent('.dropdown-menu').length) {//父元素时.dropdown-menu时执行
element
.closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
} callback && callback()
} $active.length && transition ?
$active
.one('bsTransitionEnd', next)
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next() $active.removeClass('in')
} // TAB PLUGIN DEFINITION
// ===================== function Plugin(option) {
return this.each(function () {//加each是jquery插件的标配,意为选中多个dom时挨个处理
var $this = $(this)
var data = $this.data('bs.tab')//先取一下bs.tab 这一步是为了缓存Tab对象的,这是必须的,不可能点击一下tab就new Tab(this), if (!data) $this.data('bs.tab', (data = new Tab(this)))//如果没有data,那么吧点击的a标签传入tab,然后把Tab对象赋值给data
if (typeof option == 'string') data[option]()//如果传入的是字符串,则执行相应的方法
})
} var old = $.fn.tab $.fn.tab = Plugin
$.fn.tab.Constructor = Tab // TAB NO CONFLICT
// =============== $.fn.tab.noConflict = function () {//这个防冲突的代码,为了规范,应该加上
$.fn.tab = old
return this
} // TAB DATA-API 自动给你初始化了,这样就可以不用写js代码了
// ============ var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
} $(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)//pill这个是给胶囊导航用的,其实tab和pill原理都一样,只是名字不一样而已 }(jQuery);
Bootstrap tabs 源码分析的更多相关文章
- Bootstrap Tooltip源码分析
/* ======================================================================== * Bootstrap: tooltip.js ...
- Bootstrap popover源码分析
/* ======================================================================== * Bootstrap: popover.js ...
- Bootstrap Dropdown 源码分析
/* ======================================================================== * Bootstrap: dropdown.js ...
- Bootstrap button源码分析
/* ======================================================================== * Bootstrap: button.js v ...
- BOOtstrap源码分析之 tooltip、popover
一.tooltip(提示框) 源码文件: Tooltip.jsTooltip.scss 实现原理: 1.获取当前要显示tooltip的元素的定位信息(top.left.bottom.right.wid ...
- Bootstrap源码分析之dropdown
源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...
- Appium Server源码分析之作为Bootstrap客户端
Appium Server拥有两个主要的功能: 它是个http服务器,它专门接收从客户端通过基于http的REST协议发送过来的命令 他是bootstrap客户端:它接收到客户端的命令后,需要想办法把 ...
- Appium Android Bootstrap源码分析之启动运行
通过前面的两篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>和<Appium Android Bootstrap源码分析之命令解析 ...
- Appium Android Bootstrap源码分析之命令解析执行
通过上一篇文章<Appium Android Bootstrap源码分析之控件AndroidElement>我们知道了Appium从pc端发送过来的命令如果是控件相关的话,最终目标控件在b ...
随机推荐
- Java 调用存储过程 返回结果集
这里使用Oracle数据库的thin连接. 下面是存储过程SQL 1 createorreplaceprocedure proc3(stid in student.stuid%type, stname ...
- 使用sphinx
SQL 结构化查询语言(是一种标准,所有的关系型数据库Mysql,sqlserver,oracle) sphinx的使用两种方式: 第一种: 使用sphinx的API来操作sphinx (常 ...
- Linux环境下c程序的编译和执行
1 单个文件的编译和执行创建main.c文件,内容如下: #include <stdio.h> #include <stdlib.h> int main(void){ prin ...
- Insert 语句对 nologging 与 logging表 在不同场景下的优化
前言 前段时间报表数据库上有条insert sql语句,插入的大量数据,执行非常慢,需要对其进行分析优化. 分析步骤是在:ARCHIVE与NOARCHIVE模式下进行. 测试场景: 分别对表的常规插入 ...
- react初探索--react + react-router + ant-design 后台管理系统配置
首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...
- Web的三大基石
[HTML] 实现了Web页面. [URL] 1.url Uniform Resource Locator的缩写,称为统一资源定位符.通过URL可以访问到互联网上的一个资源.如:图片.视频.网页等.通 ...
- 【02】emmet系列之HTML语法
[01]emmet系列之基础介绍 [02]emmet系列之HTML语法 [03]emmet系列之CSS语法 [04]emmet系列之编辑器 [05]emmet系列之各种缩写 初始化 :快速编写HTML ...
- HDU 4465 递推与double的精确性
题目大意不多说了 这里用dp[i][0] 代表取完第一个盒子后第二个盒子剩 i 个的概率,对应期望就是dp[i][0] *i dp[i][1] 就代表取完第二个盒子后第一个盒子剩 i 个的概率 dp[ ...
- hdu 1027
#include<stdio.h> #include<algorithm> using namespace std; int a[1100]; int main() { in ...
- hdu 4771好题
#include<stdio.h> #include<string.h>//通过只记录每一步此时点的状态.题非常好 #include<queue> using na ...