Explication de la fonction d'onglet dans Bootstrap

Mots précédents

Les onglets sont une fonction très couramment utilisée sur le Web. Lorsque l'utilisateur clique sur l'élément de menu, le contenu correspondant peut être désactivé. Cet article présentera en détail l'utilisation de base de l'onglet Bootstrap

L'onglet du framework Bootstrap se compose principalement de deux parties :

1 . Onglet Le composant de menu correspond aux onglets de navigation de Bootstrap

2. Le composant du panneau d'onglets commutable est généralement représenté par un volet d'onglets dans Bootstrap

Dans le framework Bootstrap, les onglets de navigation ont styles et le volet de l'onglet du contenu du panneau est masqué. Seul le contenu actuel du panneau est affiché

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

L'onglet définit l'attribut de données pour déclencher l'effet de commutation. 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. pendant le processus de commutation Pour un effet plus fluide, vous pouvez ajouter le fondu du nom de classe au 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 des onglets de navigation ayant une fonction de changement d'onglet, la navigation par capsule nav-pills peut également avoir une fonction d'onglets. Remplacez simplement les onglets de navigation par les 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 la bascule 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>

【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('outline','1px solid black');    
    }).on("hide.bs.tab",function(e){
        $(e.target).css('outline','none');  
    })
})</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 ne peut s'étendre 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 () {//当前tabvar $this    = this.element//找到最近的ulvar $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)//高亮显示当前tabthis.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 {//否则删除fadeelement.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】Événement déclencheur de liaison

  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)

　

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!