Bootstrap中tab選項的示例分析

這篇文章主要介紹了Bootstrap中tab選項的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

選項卡Tabs是Web中一種非常常用的功能。用戶點擊對菜單項，能切換出對應(yīng)的內(nèi)容。本文將詳細(xì)介紹Bootstrap選項卡

基本用法

　　Bootstrap框架中的選項卡主要有兩部分內(nèi)容組成：

　　1、選項卡菜單組件，對應(yīng)的是 Bootstrap的 nav-tabs

　　2、可以切換的選項卡面板組件，在 Bootstrap 中通常 tab-pane 來表示

　　在Bootstrap框架中選項卡nav-tabs已帶有樣式，而對于面板內(nèi)容tab-pane都是隱藏的，只有當(dāng)前面板內(nèi)容才是顯示的

.tab-content > .tab-pane {
    display: none;
}
.tab-content > .active {
    display: block;
}

　　選項卡定義data屬性來觸發(fā)切換效果。當(dāng)然前提要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項卡需要滿足以下幾點要求：

　　1、選項卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab"

　　2、并且設(shè)置 data-target="對應(yīng)內(nèi)容面板的選擇符(一般是ID)"；如果是鏈接的話，還可以通過 href="對應(yīng)內(nèi)容面板的選擇符(一般是ID)"，主要作用是用戶點擊的時候能找到該選擇符所對應(yīng)的面板內(nèi)容 tab-pane。

　　3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個內(nèi)容面板 tab-pane 都需要設(shè)置一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="bulletin">公告內(nèi)容面板</div>
    <div class="tab-pane " id="rule">規(guī)則內(nèi)容面板</div>
    <div class="tab-pane " id="forum">論壇內(nèi)容面板</div>
    <div class="tab-pane " id="security">安全內(nèi)容面板</div>
    <div class="tab-pane " id="welfare">公益內(nèi)容面板</div>
</div>

【漸入效果】

　　為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名 fade，讓其產(chǎn)生漸入的效果。

　　在添加 fade 樣式時，最初的默認(rèn)顯示的內(nèi)容面板一定要加上 in 類名，不然用戶無法看到其內(nèi)容

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li>
    <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
    <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
    <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
    <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
    <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
    <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>

【膠囊式選項卡】

　　在Bootstrap除了可以讓 nav-tabs 具有選項卡的切換功能之外，還可以讓膠囊式 nav-pills 導(dǎo)航也具有選項卡的功能。只需要將 nav-tabs 換成 nav-pills，另外關(guān)鍵一點是將 data-toggle="tab"換成data-toggle="pill"

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
    <li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li>
    <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li>
    <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
    <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
    <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
    <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
    <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
    <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>

JS觸發(fā)

　　除了在HTML設(shè)置 data-toggle 來觸發(fā)選項卡之外，還可以通過JavaScript直接調(diào)用。

　　在每個鏈接的單擊事件中調(diào)用tab("show")方法，顯示對應(yīng)的標(biāo)簽面板內(nèi)容。針對上面的示例，刪除HTML中自定義的 data-toggle="tab" 或 data-toggle="pill" 的屬性，然后通過下面的腳本來調(diào)用

$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab" >規(guī)則</a></li>
    <li><a href="#forum" role="tab" >論壇</a></li>
    <li><a href="#security" role="tab" >安全</a></li>
    <li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
    <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
    <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
    <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
    <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<script>
$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
})
</script>

【事件訂閱】

show.bs.tab        show方法調(diào)用之后立即觸發(fā)該事件
shown.bs.tab   　　 此事件在tab已經(jīng)顯示出來（并且同時在 CSS 過渡效果完成）之后被觸發(fā)
hide.bs.tab        hide方法調(diào)用之后立即觸發(fā)該事件。
hidden.bs.tab    　此事件在tab被隱藏（并且同時在 CSS 過渡效果完成）之后被觸發(fā)

<!-- 選項卡菜單-->
<ul id="myTab" class="nav nav-pills" role="tablist">
    <li class="active"><a href="#bulletin" role="tab">公告</a></li>
    <li><a href="#rule" role="tab" >規(guī)則</a></li>
    <li><a href="#forum" role="tab" >論壇</a></li>
    <li><a href="#security" role="tab" >安全</a></li>
    <li><a href="#welfare" role="tab" >公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
    <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
    <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
    <div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
    <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
<script>
$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
    $("#myTab").on("show.bs.tab",function(e){
         $(e.target).css('outline','1px solid black');    
    }).on("hide.bs.tab",function(e){
        $(e.target).css('outline','none');  
    })
})
</script>

JS源碼

【1】IIFE

　　使用立即調(diào)用函數(shù)，防止插件內(nèi)代碼外泄，從而形成一個閉環(huán)，并且只能從jQuery的fn里進(jìn)行擴展

+function ($) {
    //使用es5嚴(yán)格模式
    'use strict';
    //
}(window.jQuery);

【2】初始設(shè)置

var Tab = function (element) {
    //指定當(dāng)前元素
    this.element = $(element)
  }
  //版本號為3.3.7
  Tab.VERSION = '3.3.7'
  //動畫時間為150ms
  Tab.TRANSITION_DURATION = 150

【3】插件核心代碼

//show()方法用于觸發(fā)show事件，調(diào)用activate原型方法，觸發(fā)shown事件
  Tab.prototype.show = function () {
    //當(dāng)前tab
    var $this    = this.element
    //找到最近的ul
    var $ul      = $this.closest('ul:not(.dropdown-menu)')
    //找到data-target值
    var selector = $this.data('target')
    //如果data-target值不存在，查找href值
    if (!selector) {
      selector = $this.attr('href')
      //IE7特殊處理
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') 
    }
    //如果當(dāng)前tab已經(jīng)是活動狀態(tài)了，即父元素li上已經(jīng)有active樣式的話，直接返回
    if ($this.parent('li').hasClass('active')) return
    //找到上一個元素，即上一個帶有active樣式的li里的a元素
    var $previous = $ul.find('.active:last a')
    //設(shè)置hide事件
    var hideEvent = $.Event('hide.bs.tab', {
      relatedTarget: $this[0]
    })
    //設(shè)置show事件
    var showEvent = $.Event('show.bs.tab', {
      relatedTarget: $previous[0]
    })
    //觸發(fā)hide事件及show事件
    $previous.trigger(hideEvent)
    $this.trigger(showEvent)
    //如果自定義回調(diào)中阻止了默認(rèn)行為，則不再繼續(xù)處理
    if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
    //要激活顯示的面板，即target或href里的值所對應(yīng)的元素
    var $target = $(selector)
    //高亮顯示當(dāng)前tab
    this.activate($this.closest('li'), $ul)
    //顯示對應(yīng)的面板，并在回調(diào)里觸發(fā)hidden及shown事件
    this.activate($target, $target.parent(), function () {
      $previous.trigger({
        type: 'hidden.bs.tab',
        relatedTarget: $this[0]
      })
      $this.trigger({
        type: 'shown.bs.tab',
        relatedTarget: $previous[0]
      })
    })
  }
  //active樣式的應(yīng)用，面板的顯示和隱藏，以及tab的高亮與反高亮
  Tab.prototype.activate = function (element, container, callback) {
    //查找當(dāng)前容器所有有active樣式的元素
    var $active    = container.find('> .active')
    //判斷是使用回調(diào)還是動畫
    var transition = callback
      && $.support.transition
      && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)

    function next() {
      $active
        //去除其他元素的active樣式
        .removeClass('active')
        //包括li元素里面的下拉菜單里的active樣式也要去除
        .find('> .dropdown-menu > .active')
          .removeClass('active')
        .end()
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', false)

      element
        //給當(dāng)前被單擊的元素添加active高亮樣式
        .addClass('active')
        .find('[data-toggle="tab"]')
          .attr('aria-expanded', true)

      if (transition) {
        //如果支持動畫，就重繪頁面
        element[0].offsetWidth 
        //并添加in樣式，去除透明
        element.addClass('in')
      } else {
        //否則刪除fade
        element.removeClass('fade')
      }
      //如果單擊的是下拉菜單里的項目
      if (element.parent('.dropdown-menu').length) {
        element
          //打到最近的li.dropdown元素進(jìn)行高亮
          .closest('li.dropdown')
            .addClass('active')
          .end()
          .find('[data-toggle="tab"]')
            .attr('aria-expanded', true)
      }
      //如果有回調(diào)就執(zhí)行回調(diào)
      callback && callback()
    }
    //如果支持動畫
    $active.length && transition ?
      $active
        //在動畫結(jié)束后執(zhí)行next()
        .one('bsTransitionEnd', next)
        .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
      next()

    $active.removeClass('in')
  }

【4】jQuery插件定義

function Plugin(option) {
    //根據(jù)選擇器，遍歷所有符合規(guī)則的元素
    return this.each(function () {
      var $this = $(this)
      //獲取自定義屬性bs.tab的值
      var data  = $this.data('bs.tab')
      //如果值不存在，則將Tab實例設(shè)置為bs.tab值
      if (!data) $this.data('bs.tab', (data = new Tab(this)))
      //如果option傳遞了string，則表示要執(zhí)行某個方法  
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tab
  //保留其他庫的$.fn.tab代碼(如果定義的話)，以便在noConflict之后可以繼續(xù)使用該老代碼
  $.fn.tab             = Plugin
  //重設(shè)插件構(gòu)造器，可以通過該屬性獲取插件的真實類函數(shù)
  $.fn.tab.Constructor = Tab

【5】防沖突處理

$.fn.tab.noConflict = function () {
     //恢復(fù)以前的舊代碼
    $.fn.tab = old
    //將$.fn.tab.noConflict()設(shè)置為Bootstrap的Tab插件
    return this
  }

【6】綁定觸發(fā)事件

var clickHandler = function (e) {
    //阻止默認(rèn)行為
    e.preventDefault()
    //觸發(fā)show()方法
    Plugin.call($(this), 'show')
  }

  $(document)
    //在document上綁定單擊事件
    .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
    .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Bootstrap中tab選項的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!