Plug-in de la page à onglet (Tab) à apprendre absolument tous les jours_compétences Javascript de Bootstrap

Onglet Vous pouvez facilement créer une interface à onglets en combinant certains attributs de données.

"Si vous souhaitez référencer uniquement la fonctionnalité du plugin, vous devez alors référencer tab.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou la version zip de bootstrap.min.js "

1.Utilisation
Vous pouvez activer les onglets de deux manières :

Via l'attribut data : vous devez ajouter data-toggle="tab" ou data-toggle="pill" au lien de texte d'ancrage.

Ajoutez les classes nav et nav-tabs à ul et le style de balise Bootstrap sera appliqué. Ajoutez les classes nav et nav-pills à ul et le style de capsule Bootstrap sera appliqué.

<ul class="nav nav-tabs">
  <li><a href="#identifier" data-toggle="tab">Home</a></li>
...
</ul>

Via JavaScript : vous pouvez utiliser Javscript pour activer les onglets comme suit :

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

Les exemples suivants montrent différentes manières d'activer des onglets individuels :

// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
 
// 选取第一个标签页
$('#myTab a:first').tab('show') 
 
// 选取最后一个标签页
$('#myTab a:last').tab('show') 
 
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

2. Effet de fondu entrant et sortant
Si vous devez définir l'effet de fondu pour la page à onglet, veuillez ajouter .fade après chaque volet .tab. Le premier onglet doit ajouter la classe .in afin de faire apparaître en fondu et afficher le contenu initial, comme le montre l'exemple ci-dessous :

<div class="tab-content">
 <div class="tab-pane fade in active" id="home">...</div>
 <div class="tab-pane fade" id="svn">...</div>
 <div class="tab-pane fade" id="ios">...</div>
 <div class="tab-pane fade" id="java">...</div>
</div>

3. Méthode
.$().tab : Cette méthode active les éléments d'onglet et les conteneurs de contenu. L'onglet doit utiliser une cible de données ou un href pointant vers le nœud conteneur dans le DOM.

<ul class="nav nav-tabs" id="myTab">
 <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
 .....
</ul>
<div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 .....
</div>
<script>
 $(function () {
  $('#myTab a:last').tab('show')
 })
</script>

4. Événements
Le tableau suivant répertorie les événements utilisés dans le plug-in Tab. Ces événements peuvent être utilisés comme hooks dans les fonctions.

5. Exemples de base
1． Page de balises
La page à onglet est également communément appelée fonction d'onglet.

//基本用法
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#html5"
    data-toggle="tab">HTML5</a>
  </li>
  <li>
    <a href="#bootstrap" data-toggle="tab">Bootstrap</a>
  </li>
  <li>
    <a href="#jquery" data-toggle="tab">jQuery</a>
  </li>
  <li>
    <a href="#extjs" data-toggle="tab">ExtJS</a>
  </li>
</ul>

<div class="tab-content" style="padding: 10px;">
  <div class="tab-pane active" id="html5">
    ...
  </div>
  <div class="tab-pane" id="bootstrap">
    ...
  </div>
  <div class="tab-pane" id="jquery">
    ...
  </div>
  <div class="tab-pane" id="extjs">
    ...
  </div>
</div>

//可以设置淡入淡出效果 fade，而 in 表示首选的内容默认显示

<div class="tab-pane fade in active" id="html5">
//也可以换成胶囊式

<ul class="nav nav-pills">
//data-target

Utiliser data-target pour lier ou non a le même effet

//使用 JavaScript，直接使用 tab 方法。

$('#nav a').on('click', function(e) {
  e.preventDefault();
  $(this).tab('show');
}); 

//事件，其他雷同

$('#nav a').on('show.bs.tab', function() {
  alert('调用 tab 时触发！');
});

$('#nav a').on('shown.bs.tab', function() {
  alert('显示完 tab 时触发！');
}); 

Pour plus de contenu, veuillez prêter attention au sujet Bootstrap : Tutoriel d'apprentissage Bootstrap

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.