bootstrap源码学习与示例：bootstrap-tab

2019独角兽企业重金招聘Python工程师标准>>>

切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。

切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。

面板区要求就相对宽松些，容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。

<ulid="mytab"class="nav nav-tabs">

<liclass="active"><ahref="#home"data-toggle="tab">首页</a></li>

<li><ahref="#profile"data-toggle="tab">介绍</a></li>

<li><ahref="#messages"data-toggle="tab">消息</a></li>

<li><ahref="#settings"data-toggle="tab">设置</a></li>

</ul>

<divclass="tab-content">

<divclass="tab-pane active"id="home">111</div>

<divclass="tab-pane"id="profile">2222</div>

<divclass="tab-pane"id="messages">333</div>

<divclass="tab-pane"id="settings">444.</div>

</div>

这样你直接引入JS就能用了，但你必须为当中某个标签页的LI元素指定"active"类名

如果你想用JS明确指定哪个面板被激活，你是要对它的某个标签页的链接使用tab("show")方法，而不是作用于它的容器上。这个与其他jQuery插件有点不同。

$(function() {

$('.nav-tabs a:last').tab('show')

})

!function($) {

"use strict";// jshint ;_;

/* TAB CLASS DEFINITION

* ==================== */

varTab =function(element) {

this.element = $(element)

}

//整个控件分两部分,触发区与面板区

Tab.prototype = {

constructor: Tab ,

//这是用于切换触发区与相关事件,并在里面调用切换面板的activate

show:function() {

var$this=this.element

, $ul = $this.closest('ul:not(.dropdown-menu)')//找到触发区的容器

, selector = $this.attr('data-target')//取得对应的面板的CSS表达式

, previous

, $target

, e

if(!selector) {

selector = $this.attr('href')//没有则从href得到

selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7

}

if( $this.parent('li').hasClass('active') )return

previous = $ul.find('.active:last a')[0]//对得之前被激活的链接

e = $.Event('show', {

relatedTarget: previous

})

$this.trigger(e)

if(e.isDefaultPrevented())return

$target = $(selector)

this.activate($this.parent('li'), $ul)

this.activate($target, $target.parent(),function() {

$this.trigger({

type:'shown'

,

relatedTarget: previous

})

})

}  ,

//这方面不应该放到原型上，应该做成私有方法

activate:function( element, container, callback) {

var$deactivate = container.find('> .active')

, transition = callback

&& $.support.transition

&& $deactivate.hasClass('fade')

functionnext() {

//让之前的处于激活状态处于激活状态

$deactivate

.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')

}

//执行回调，目的是触发shown事件

callback && callback()

}

transition ?

$deactivate.one($.support.transition.end, next) :

next()

//开始触发CSS3 transition回调

$deactivate.removeClass('in')

}

}

/* TAB PLUGIN DEFINITION

* ===================== */

varold = $.fn.tab

$.fn.tab =function( option ) {

returnthis.each(function() {

var$this= $(this)

, data = $this.data('tab')

if(!data) $this.data('tab', (data =newTab(this)))

if(typeofoption =='string') data[option]()//show

})

}

$.fn.tab.Constructor = Tab

/* TAB NO CONFLICT

* =============== */

$.fn.tab.noConflict =function() {

$.fn.tab = old

returnthis

}

/* TAB DATA-API

* ============ */

//要求触发区必须存在[data-toggle="tab"]或[data-toggle="pill"]属性

$(document).on('click.tab.data-api','[data-toggle="tab"], [data-toggle="pill"]',function(e) {

e.preventDefault()

$(this).tab('show')

})

}(window.jQuery);

转载于:https://my.oschina.net/u/2357525/blog/464076