先看bootstrap-tab.js的结构

var Tab = function ( element ) {} //构造器
Tab.prototype ={} //构造器的原型
$.fn.tab = function ( option ){} //jQuery原型上自定义的方法
$.fn.tab.Constructor = Tab //重写jQuery原型上的自定义方法的构造器名
$(function () {}) //初始化

HTML结构

<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab" >首页</a></li>
<li><a href="#profile" data-toggle="tab">介绍</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li> </ul> <div class="tab-content">
<div class="tab-pane active" id="home">1</div>
<div class="tab-pane" id="profile">2</div>
<div class="tab-pane" id="messages">3</div>
<div class="tab-pane" id="settings">4</div>
</div>

先从初始化开始

/*
* 初始化
* 给拥有data-toggle='tab'属性的标签绑定click事件
* */
$(function () {
$('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')//向jQuery原型方法tab传入参数show,应该执行show方法。this为拥有data-toggle属性的a标签对象
})
})

让body监听a标签的click事件,并且阻止其冒泡,调用了jQuery的原型方法tab。

/*
* jQuery原型上自定义的方法
* */
$.fn.tab = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('tab')
if (!data) $this.data('tab', (data = new Tab(this)))//实例化构造器
if (typeof option == 'string') data[option]()//执行option的方法
})
}

这个结构跟之前的几个插件差不多,不过最后它是执行了show方法的,进入构造器

var Tab = function ( element ) {
this.element = $(element)
}

将对象封装成构造器实例的一个属性。接下来我们执行show方法

show: function () {
var $this = this.element
, $ul = $this.closest('ul:not(.dropdown-menu)')//找到最近的不是dropdown类的ul元素
, selector = $this.attr('data-target')
, previous
, $target
//获取与a标签对应的内容id
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
//如果一直点击自己,这句之后的代码将不执行
if ( $this.parent('li').hasClass('active') ) return previous = $ul.find('.active a').last()[0]//获得拥有active类的原生a标签对象,即上一次高亮的节点 $this.trigger({
type: 'show'
, relatedTarget: previous
}) $target = $(selector)//获得内容节点的jQueryDOM对象 this.activate($this.parent('li'), $ul)//tab页切换 this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'shown'
, relatedTarget: previous
}) })

根据标签a的data-target属性或是其href找到对应的id的dom节点。最后我们执行了两次activate方法,其实大概猜的出来,一个方法控制a标签的高亮显示,另一个控制dom节点的显示与隐藏

/*
* 控制显示与隐藏
* 参数主要形式是这样的,一个是可以拥有active类的元素,另一个是其父类。
* 先找到父类下来所有拥有active类的节点,删除它们的active,并将当前节点,也就是第一个参数加上active类。
*
* */
, activate: function ( element, container, callback) { var $active = container.find('> .active')
, transition = callback
&& $.support.transition//需要引入其他js文件,这里没有引入。
&& $active.hasClass('fade')
console.log($active[0])
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active') element.addClass('active') if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
} if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
} callback && callback()
} transition ?
$active.one($.support.transition.end, next) :
next() $active.removeClass('in')
}

逻辑比较简单,一般遇到一个显示其他同类不显示的情况,基本都是这一套方法,增删class来达到要求。但对于jQuery操作css完成class切换与javascript原生方法相比,哪个效率会更好一点呢?也希望有经验的园友给予解答。

另外是部分css,表现了两块active类的作用

/*tab页切换时的active作用*/
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;//将底部边框变透明
} /*dom*/ .tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none; //原来为隐藏
} .tab-content > .active,
.pill-content > .active {
display: block; //加入active ,变为显示
}

文实例为大家介绍实现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事件源码:

1
2
3
4
5
6
7
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插件学习-bootstrap.tab.js(读码)的更多相关文章

  1. bootstrap插件学习-bootstrap.dropdown.js

    bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...

  2. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  3. bootstrap插件学习-bootstrap.tab.js

    先看bootstrap-tab.js的结构 var Tab = function ( element ) {} //构造器 Tab.prototype ={} //构造器的原型 $.fn.tab = ...

  4. bootstrap插件学习-bootstrap.typehead.js

    先看bootstrap.typehead.js的结构 var Typeahead = function ( element, options ){} //构造器 Typeahead.prototype ...

  5. bootstrap插件学习-bootstrap.carousel.js

    先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = { ...

  6. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  7. bootstrap插件学习-bootstrap.alert.js

    我们先看bootstrap.alert.js的结构 var dismiss = '[data-dismiss="alert"]' //自定义属性 Alert = function ...

  8. bootstrap插件学习-bootstrap.button.js

    先看bootstrap.button.js的结构 var Button = function ( element, options ){} //构造器 Button.prototype = {} // ...

  9. bootstrap插件学习-bootstrap.popover.js

    先看bootstrap.popover.js的结构 var Popover = function ( element, options ){} //构造器 Popover.prototype = {} ...

随机推荐

  1. 使用VS2010编译MongoDB C++驱动详解

    最近为了解决IM消息记录的高速度写入.多文档类型支持的需求,决定使用MongoDB来解决. 考虑到MongoDB对VS版本要求较高,与我现有的VS版本不兼容,在leveldb.ssdb.redis.h ...

  2. CursorAdapter中getView newView bindView异同

    Adapter的作用是界面与数据之间的桥梁,通过设置适配器至ListView控件后(如调用ListView的 setAdapter(ListAdapter adapter)               ...

  3. EF数据更新时候异常情况一

    在不熟练EF的时候有时更新数据时候会报以下异常: 错误原因:此时操作的实体不是从数据库里获取的.而是自己new出来的实体然后赋值的.EF此时的存储池中已经有了这个实体,在new一个对象ID相同就不能共 ...

  4. Chrome控制台报错个人总结(不定时更新)

    最近开始使用Chrome控制台检测代码错误,对于经常碰到的报错做一个汇总,免得每次遇到都要重新想一遍策略,错误原因,重复劳动,浪费时间. 由于不是每个错误都能碰到,以下仅列出个人写代码时经常碰到的报错 ...

  5. 2015/8/31 Python基础(5):字符串

    字符串是Python最常见的一种类型.通过在引号间包含字符的方式创建它.Python里单双引号的作用是一致的.Python的对象类型里不存在字符型,一般用单个字符的字符串来使用.Python的字符串是 ...

  6. CharSequence 去除两端空格

    CharSequence就是字符序列,String, StringBuilder和StringBuffer都是其实现类. 模仿String.trim() 实现了一个CharSequence通用的去除两 ...

  7. 【BZOJ1043】下落的圆盘 [计算几何]

    下落的圆盘 Time Limit: 10 Sec  Memory Limit: 162 MB[Submit][Status][Discuss] Description 有n个圆盘从天而降,后面落下的可 ...

  8. 【NOIP】提高组2014 解方程

    [题意]已知n次方程(n<=100)及其所有系数(|ai|<=10^10000),求[1,m]中整数解的个数(m<=10^6). [算法]数论 [题解]如果f(x)=0,则有f(x) ...

  9. 20155335俞昆《java程序设计》第十周总结

    学号 2016-2017-2 <Java程序设计>第十周学习总结 ## 事实上网络编程,我们可以简单的理解为两台计算机相互通讯数据而已,对于程序员而言,掌握一种编程接口并使用一种编程模型相 ...

  10. 2017ACM暑期多校联合训练 - Team 1 1001 HDU 6033 Add More Zero (数学)

    题目链接 Problem Description There is a youngster known for amateur propositions concerning several math ...