首页-教程-Web前端

一起来了解下Bootstrap中的tab选项卡

 6137

本篇文章带大家一起了解下Bootstrap中的tab选项卡。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。


一起来了解下Bootstrap中的tab选项卡


选项卡Tabs是Web中一种非常常用的功能。用户点击对菜单项，能切换出对应的内容。本文将详细介绍

基本用法

Bootstrap框架中的选项卡主要有两部分内容组成：

1、选项卡菜单组件，对应的是 Bootstrap的 nav-tabs

2、可以切换的选项卡面板组件，在 Bootstrap 中通常 tab-pane 来表示

在Bootstrap框架中选项卡nav-tabs已带有样式，而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的

  1. .tab-content > .tab-pane {
  2.     display: none;
  3. }
  4. .tab-content > .active {
  5.     display: block;
  6. }

选项卡定义data属性来触发切换效果。当然前提要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：

1、选项卡导航链接中要设置 data-toggle="tab"

2、并且设置 data-target="对应内容面板的选择符(一般是ID)"；如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"，主要作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配

  1. <!-- 选项卡菜单-->
  2. <ul id="myTab" class="nav nav-tabs" role="tablist">
  3.     <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
  4.     <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
  5.     <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
  6.     <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
  7.     <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
  8. </ul>
  9. <!-- 选项卡面板 -->
  10. <div id="myTabContent" class="tab-content">
  11.     <div class="tab-pane active" id="bulletin">公告内容面板</div>
  12.     <div class="tab-pane " id="rule">规则内容面板</div>
  13.     <div class="tab-pane " id="forum">论坛内容面板</div>
  14.     <div class="tab-pane " id="security">安全内容面板</div>
  15.     <div class="tab-pane " id="welfare">公益内容面板</div>
  16. </div>


一起来了解下Bootstrap中的tab选项卡


【渐入效果】

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

在添加 fade 样式时，最初的默认显示的内容面板一定要加上 in 类名，不然用户无法看到其内容

  1. <!-- 选项卡菜单-->
  2. <ul id="myTab" class="nav nav-tabs" role="tablist">
  3.     <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
  4.     <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>
  5.     <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>
  6.     <li><a href="#security" role="tab"  data-toggle="tab">安全</a></li>
  7.     <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
  8. </ul>
  9. <!-- 选项卡面板 -->
  10. <div id="myTabContent" class="tab-content">
  11.     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  12.     <div class="tab-pane fade" id="rule">规则内容面板</div>
  13.     <div class="tab-pane fade" id="forum">论坛内容面板</div>
  14.     <div class="tab-pane fade" id="security">安全内容面板</div>
  15.     <div class="tab-pane fade" id="welfare">公益内容面板</div>
  16. </div>


一起来了解下Bootstrap中的tab选项卡


【胶囊式选项卡】

在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以让胶囊式 nav-pills 导航也具有选项卡的功能。只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"

  1. <!-- 选项卡菜单-->
  2. <ul id="myTab" class="nav nav-pills" role="tablist">
  3.     <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>
  4.     <li><a href="#rule" role="tab" data-toggle="pill">规则</a></li>
  5.     <li><a href="#forum" role="tab" data-toggle="pill">论坛</a></li>
  6.     <li><a href="#security" role="tab" data-toggle="pill">安全</a></li>
  7.     <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li>
  8. </ul>
  9. <!-- 选项卡面板 -->
  10. <div id="myTabContent" class="tab-content">
  11.     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  12.     <div class="tab-pane fade" id="rule">规则内容面板</div>
  13.     <div class="tab-pane fade" id="forum">论坛内容面板</div>
  14.     <div class="tab-pane fade" id="security">安全内容面板</div>
  15.     <div class="tab-pane fade" id="welfare">公益内容面板</div>
  16. </div>


一起来了解下Bootstrap中的tab选项卡

JS触发

除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

在每个链接的单击事件中调用tab("show")方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性，然后通过下面的脚本来调用

  1. $(function(){
  2.     $("#myTab a").click(function(e){
  3.         e.preventDefault();
  4.         $(this).tab("show");
  5.     });
  6. })
  1. <!-- 选项卡菜单-->
  2. <ul id="myTab" class="nav nav-pills" role="tablist">
  3.     <li class="active"><a href="#bulletin" role="tab">公告</a></li>
  4.     <li><a href="#rule" role="tab" >规则</a></li>
  5.     <li><a href="#forum" role="tab" >论坛</a></li>
  6.     <li><a href="#security" role="tab" >安全</a></li>
  7.     <li><a href="#welfare" role="tab" >公益</a></li>
  8. </ul>
  9. <!-- 选项卡面板 -->
  10. <div id="myTabContent" class="tab-content">
  11.     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  12.     <div class="tab-pane fade" id="rule">规则内容面板</div>
  13.     <div class="tab-pane fade" id="forum">论坛内容面板</div>
  14.     <div class="tab-pane fade" id="security">安全内容面板</div>
  15.     <div class="tab-pane fade" id="welfare">公益内容面板</div>
  16. </div>
  17. <script>
  18. $(function(){
  19.     $("#myTab a").click(function(e){
  20.         e.preventDefault();
  21.         $(this).tab("show");
  22.     });
  23. })
  24. </script>


一起来了解下Bootstrap中的tab选项卡

【事件订阅】

  1. show.bs.tab        show方法调用之后立即触发该事件
  2. shown.bs.tab   　　 此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
  3. hide.bs.tab        hide方法调用之后立即触发该事件。
  4. hidden.bs.tab    　此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发
  1. <!-- 选项卡菜单-->
  2. <ul id="myTab" class="nav nav-pills" role="tablist">
  3.     <li class="active"><a href="#bulletin" role="tab">公告</a></li>
  4.     <li><a href="#rule" role="tab" >规则</a></li>
  5.     <li><a href="#forum" role="tab" >论坛</a></li>
  6.     <li><a href="#security" role="tab" >安全</a></li>
  7.     <li><a href="#welfare" role="tab" >公益</a></li>
  8. </ul>
  9. <!-- 选项卡面板 -->
  10. <div id="myTabContent" class="tab-content">
  11.     <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
  12.     <div class="tab-pane fade" id="rule">规则内容面板</div>
  13.     <div class="tab-pane fade" id="forum">论坛内容面板</div>
  14.     <div class="tab-pane fade" id="security">安全内容面板</div>
  15.     <div class="tab-pane fade" id="welfare">公益内容面板</div>
  16. </div>
  17. <script>
  18. $(function(){
  19.     $("#myTab a").click(function(e){
  20.         e.preventDefault();
  21.         $(this).tab("show");
  22.     });
  23.     $("#myTab").on("show.bs.tab",function(e){
  24.          $(e.target).css('outline','1px solid black');    
  25.     }).on("hide.bs.tab",function(e){
  26.         $(e.target).css('outline','none');  
  27.     })
  28. })
  29. </script>


一起来了解下Bootstrap中的tab选项卡


JS源码

【1】IIFE

使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展

  1. function ($) {
  2.     //使用es5严格模式
  3.     'use strict';
  4.     //
  5. }(window.jQuery);

【2】初始设置

  1. var Tab = function (element) {
  2.     //指定当前元素
  3.     this.element = $(element)
  4. }
  5. //版本号为3.3.7
  6. Tab.VERSION = '3.3.7'
  7. //动画时间为150ms
  8. Tab.TRANSITION_DURATION = 150

【3】插件核心代码

  1. //show()方法用于触发show事件，调用activate原型方法，触发shown事件
  2. Tab.prototype.show = function () {
  3.     //当前tab
  4.     var $this    = this.element
  5.     //找到最近的ul
  6.     var $ul      = $this.closest('ul:not(.dropdown-menu)')
  7.     //找到data-target值
  8.     var selector = $this.data('target')
  9.     //如果data-target值不存在，查找href值
  10.     if (!selector) {
  11.         selector = $this.attr('href')
  12.         //IE7特殊处理
  13.         selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') 
  14.     }
  15.     //如果当前tab已经是活动状态了，即父元素li上已经有active样式的话，直接返回
  16.     if ($this.parent('li').hasClass('active')) return
  17.     //找到上一个元素，即上一个带有active样式的li里的a元素
  18.     var $previous = $ul.find('.active:last a')
  19.     //设置hide事件
  20.     var hideEvent = $.Event('hide.bs.tab', {
  21.         relatedTarget: $this[0]
  22.     })
  23.     //设置show事件
  24.     var showEvent = $.Event('show.bs.tab', {
  25.         relatedTarget: $previous[0]
  26.     })
  27.     //触发hide事件及show事件
  28.     $previous.trigger(hideEvent)
  29.     $this.trigger(showEvent)
  30.     //如果自定义回调中阻止了默认行为，则不再继续处理
  31.     if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
  32.     //要激活显示的面板，即target或href里的值所对应的元素
  33.     var $target = $(selector)
  34.     //高亮显示当前tab
  35.     this.activate($this.closest('li'), $ul)
  36.     //显示对应的面板，并在回调里触发hidden及shown事件
  37.     this.activate($target, $target.parent(), function () {
  38.         $previous.trigger({
  39.             type: 'hidden.bs.tab',
  40.             relatedTarget: $this[0]
  41.         })
  42.         $this.trigger({
  43.             type: 'shown.bs.tab',
  44.             relatedTarget: $previous[0]
  45.         })
  46.     })
  47. }
  48. //active样式的应用，面板的显示和隐藏，以及tab的高亮与反高亮
  49. Tab.prototype.activate = function (element, container, callback) {
  50.     //查找当前容器所有有active样式的元素
  51.     var $active    = container.find('> .active')
  52.     //判断是使用回调还是动画
  53.     var transition = callback
  54.         && $.support.transition
  55.         && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)
  56.  
  57.     function next() {
  58.         $active
  59.             //去除其他元素的active样式
  60.             .removeClass('active')
  61.             //包括li元素里面的下拉菜单里的active样式也要去除
  62.             .find('> .dropdown-menu > .active')
  63.             .removeClass('active')
  64.             .end()
  65.             .find('[data-toggle="tab"]')
  66.             .attr('aria-expanded', false)
  67.  
  68.         element
  69.             //给当前被单击的元素添加active高亮样式
  70.             .addClass('active')
  71.             .find('[data-toggle="tab"]')
  72.             .attr('aria-expanded', true)
  73.  
  74.         if (transition) {
  75.             //如果支持动画，就重绘页面
  76.             element[0].offsetWidth 
  77.             //并添加in样式，去除透明
  78.             element.addClass('in')
  79.         } else {
  80.             //否则删除fade
  81.             element.removeClass('fade')
  82.         }
  83.         //如果单击的是下拉菜单里的项目
  84.         if (element.parent('.dropdown-menu').length) {
  85.             element
  86.                 //打到最近的li.dropdown元素进行高亮
  87.                 .closest('li.dropdown')
  88.                 .addClass('active')
  89.                 .end()
  90.                 .find('[data-toggle="tab"]')
  91.                 .attr('aria-expanded', true)
  92.         }
  93.         //如果有回调就执行回调
  94.         callback && callback()
  95.     }
  96.     //如果支持动画
  97.     $active.length && transition ?
  98.         $active
  99.             //在动画结束后执行next()
  100.             .one('bsTransitionEnd', next)
  101.             .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
  102.         next()
  103.  
  104.         $active.removeClass('in')
  105.     }

【4】jQuery插件定义

  1. function Plugin(option) {
  2.     //根据选择器，遍历所有符合规则的元素
  3.     return this.each(function () {
  4.         var $this = $(this)
  5.         //获取自定义属性bs.tab的值
  6.         var data  = $this.data('bs.tab')
  7.         //如果值不存在，则将Tab实例设置为bs.tab值
  8.         if (!data) $this.data('bs.tab', (data = new Tab(this)))
  9.         //如果option传递了string，则表示要执行某个方法  
  10.         if (typeof option == 'string') data[option]()
  11.     })
  12. }
  13.  
  14. var old = $.fn.tab
  15. //保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  16. $.fn.tab             = Plugin
  17. //重设插件构造器，可以通过该属性获取插件的真实类函数
  18. $.fn.tab.Constructor = Tab

【5】防冲突处理

  1. $.fn.tab.noConflict = function () {
  2.     //恢复以前的旧代码
  3.     $.fn.tab = old
  4.     //将$.fn.tab.noConflict()设置为Bootstrap的Tab插件
  5.     return this
  6. }

【6】绑定触发事件

  1. var clickHandler = function (e) {
  2.     //阻止默认行为
  3.     e.preventDefault()
  4.     //触发show()方法
  5.     Plugin.call($(this), 'show')
  6. }
  7.  
  8. $(document)
  9.     //在document上绑定单击事件
  10.     .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
  11.     .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)


TAG标签：
本文网址：https://www.zztuku.com/detail-8792.html
站长图库 - 一起来了解下Bootstrap中的tab选项卡
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐