Découvrons l'onglet onglet dans Bootstrap

Cet article vous guidera à travers l'onglet onglet dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Onglets Les onglets sont une fonctionnalité très courante sur le Web. Lorsque l'utilisateur clique sur l'élément de menu, le contenu correspondant peut être désactivé. Cet article présentera l'onglet Bootstrap en détail [Recommandation associée : "Tutoriel bootstrap"]

Utilisation de base

Les onglets du framework Bootstrap comprend principalement Il se compose de deux parties :

1. Le composant de menu d'onglets correspond aux onglets de navigation de Bootstrap

2. Le composant de panneau d'onglets commutable est généralement un volet d'onglets dans Bootstrap Indique

Dans le framework Bootstrap, les onglets de navigation des onglets ont des styles, et le volet d'onglets du contenu du panneau est masqué, et seul le contenu actuel du panneau est affiché

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

Onglet Définir l'attribut de données pour déclencher la commutation effet. Bien entendu, la condition préalable est de charger d’abord bootstrap.js ou tab.js. Les onglets de déclenchement déclaratif doivent répondre aux exigences suivantes :

1. Définissez data-toggle="tab"

dans le lien de navigation de l'onglet 2. Et définissez data-target="corresponding Le sélecteur de le panneau de contenu (généralement ID)" ; s'il s'agit d'un lien, vous pouvez également utiliser href="le sélecteur du panneau de contenu correspondant (généralement ID)". La fonction principale est que l'utilisateur puisse trouver le sélecteur qui lui correspond lorsqu'il en cliquant sur le volet de l'onglet Contenu du panneau.

3. Le contenu du panneau est uniformément placé dans le conteneur de contenu de l'onglet, et chaque volet d'onglet du panneau de contenu doit définir un sélecteur indépendant (de préférence un ID) et la cible de données ou la cible de données dans l'onglet. . La valeur des correspondances 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">规则</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">公告内容面板</div>
    <div class="tab-pane " id="rule">规则内容面板</div>
    <div class="tab-pane " id="forum">论坛内容面板</div>
    <div class="tab-pane " id="security">安全内容面板</div>
    <div class="tab-pane " id="welfare">公益内容面板</div>
</div>

[Effet de fondu]

Afin de masquer et d'afficher le panneau plus efficace pendant le processus de commutation. En douceur, vous pouvez ajouter le fondu du nom de classe dans le panneau pour produire un effet progressif.

Lors de l'ajout du style de fondu, le panneau de contenu affiché par défaut initial doit être ajouté avec le nom de la classe, sinon l'utilisateur ne pourra pas voir son contenu

<!-- 选项卡菜单-->
<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">规则</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">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

【Onglet Capsule】

Dans Bootstrap, en plus de permettre aux onglets de navigation d'avoir la fonction de changement d'onglet, la navigation des capsules nav-pills peut également avoir la fonction d'onglet. . Remplacez simplement les onglets de navigation par des pilules de navigation. Un autre point clé est de remplacer data-toggle="tab" par 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">规则</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">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

Déclencheur JS

.

En plus de définir le basculement de données en HTML pour déclencher des onglets, il peut également être appelé directement via JavaScript.

Appelez la méthode tab("show") dans l'événement click de chaque lien pour afficher le contenu du panneau d'étiquette correspondant. Pour l'exemple ci-dessus, supprimez les attributs personnalisés data-toggle="tab" ou data-toggle="pill" en HTML, puis appelez

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

    
公告
    
规则
    
论坛
    
安全
    
公益



    
公告内容面板
    
规则内容面板
    
论坛内容面板
    
安全内容面板
    
公益内容面板

<script>
$(function(){
    $(&quot;#myTab a&quot;).click(function(e){
        e.preventDefault();
        $(this).tab(&quot;show&quot;);
    });
})
</script>

< via le script suivant 🎜>

【Abonnement à l'événement】

show.bs.tab        show方法调用之后立即触发该事件
shown.bs.tab   　　 此事件在tab已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发
hide.bs.tab        hide方法调用之后立即触发该事件。
hidden.bs.tab    　此事件在tab被隐藏（并且同时在 CSS 过渡效果完成）之后被触发

<!-- 选项卡菜单-->
<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" >规则</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">公告内容面板</div>
    <div class="tab-pane fade" id="rule">规则内容面板</div>
    <div class="tab-pane fade" id="forum">论坛内容面板</div>
    <div class="tab-pane fade" id="security">安全内容面板</div>
    <div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>
<script>
$(function(){
    $("#myTab a").click(function(e){
        e.preventDefault();
        $(this).tab("show");
    });
    $("#myTab").on("show.bs.tab",function(e){
         $(e.target).css(&#39;outline&#39;,&#39;1px solid black&#39;);    
    }).on("hide.bs.tab",function(e){
        $(e.target).css(&#39;outline&#39;,&#39;none&#39;);  
    })
})
</script>

Code source JS

【1】IIFE

Utilisez la fonction d'appel immédiat pour empêcher le code du plug-in de fuir, formant ainsi une boucle fermée, et il ne peut être étendu qu'à partir du fn de jQuery

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

【2】Paramètres initiaux

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

【3 】Code principal du plug-in

//show()方法用于触发show事件，调用activate原型方法，触发shown事件
  Tab.prototype.show = function () {
    //当前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]*$)/, '') 
    }
    //如果当前tab已经是活动状态了，即父元素li上已经有active样式的话，直接返回
    if ($this.parent('li').hasClass('active')) return
    //找到上一个元素，即上一个带有active样式的li里的a元素
    var $previous = $ul.find('.active:last a')
    //设置hide事件
    var hideEvent = $.Event('hide.bs.tab', {
      relatedTarget: $this[0]
    })
    //设置show事件
    var showEvent = $.Event('show.bs.tab', {
      relatedTarget: $previous[0]
    })
    //触发hide事件及show事件
    $previous.trigger(hideEvent)
    $this.trigger(showEvent)
    //如果自定义回调中阻止了默认行为，则不再继续处理
    if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return
    //要激活显示的面板，即target或href里的值所对应的元素
    var $target = $(selector)
    //高亮显示当前tab
    this.activate($this.closest('li'), $ul)
    //显示对应的面板，并在回调里触发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样式的应用，面板的显示和隐藏，以及tab的高亮与反高亮
  Tab.prototype.activate = function (element, container, callback) {
    //查找当前容器所有有active样式的元素
    var $active    = container.find('> .active')
    //判断是使用回调还是动画
    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
        //给当前被单击的元素添加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元素进行高亮
          .closest('li.dropdown')
            .addClass('active')
          .end()
          .find('[data-toggle="tab"]')
            .attr('aria-expanded', true)
      }
      //如果有回调就执行回调
      callback && callback()
    }
    //如果支持动画
    $active.length && transition ?
      $active
        //在动画结束后执行next()
        .one('bsTransitionEnd', next)
        .emulateTransitionEnd(Tab.TRANSITION_DURATION) :
      next()

    $active.removeClass('in')
  }

【4】Définition du plug-in jQuery

function Plugin(option) {
    //根据选择器，遍历所有符合规则的元素
    return this.each(function () {
      var $this = $(this)
      //获取自定义属性bs.tab的值
      var data  = $this.data('bs.tab')
      //如果值不存在，则将Tab实例设置为bs.tab值
      if (!data) $this.data('bs.tab', (data = new Tab(this)))
      //如果option传递了string，则表示要执行某个方法  
      if (typeof option == 'string') data[option]()
    })
  }

  var old = $.fn.tab
  //保留其他库的$.fn.tab代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  $.fn.tab             = Plugin
  //重设插件构造器，可以通过该属性获取插件的真实类函数
  $.fn.tab.Constructor = Tab

【5】Traitement anti-conflit

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

【6】Bind événement déclencheur

var clickHandler = function (e) {
    //阻止默认行为
    e.preventDefault()
    //触发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)

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!