Bootstrap muss jeden Tag das Tab-Plugin (Tab) erlernen_Javascript-Kenntnisse-js-Tutorial-php.cn

Bootstrap muss jeden Tag das Tab-Plugin (Tab) erlernen_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:03:58

Original

1816 Leute haben es durchsucht

Tab Sie können ganz einfach eine Tab-Oberfläche erstellen, indem Sie einige Datenattribute kombinieren.

„Wenn Sie nur auf die Funktionalität des Plugins verweisen möchten, müssen Sie auf tab.js verweisen. Alternativ können Sie, wie im Kapitel Übersicht über das Bootstrap-Plugin erwähnt, auf bootstrap.js oder die Zip-Version von verweisen bootstrap.min.js "

1. Verwendung
Sie können Registerkarten auf zwei Arten aktivieren:

Über das Datenattribut: Sie müssen data-toggle="tab" oder data-toggle="pill" zum Ankertextlink hinzufügen.

Fügen Sie die Klassen nav und nav-tabs zu ul hinzu, und der Bootstrap-Tag-Stil wird angewendet. Fügen Sie die Klassen nav und nav-pills zu ul hinzu, und der Bootstrap-Kapselstil wird angewendet.

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

Nach dem Login kopieren

Über JavaScript: Sie können JavaScript verwenden, um Tabs wie folgt zu aktivieren:

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

Nach dem Login kopieren

Die folgenden Beispiele zeigen verschiedene Möglichkeiten, einzelne Registerkarten zu aktivieren:

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

Nach dem Login kopieren

2. Ein- und Ausblendeffekt
Wenn Sie den Fade-Effekt für die Registerkartenseite festlegen müssen, fügen Sie bitte .fade nach jedem .tab-pane hinzu. Die erste Registerkarte muss die .in-Klasse hinzufügen, um den ursprünglichen Inhalt einzublenden und anzuzeigen, wie im folgenden Beispiel gezeigt:

<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>

Nach dem Login kopieren

3. Methode
.$().tab: Diese Methode aktiviert Tab-Elemente und Inhaltscontainer. Die Registerkarte muss ein Datenziel oder eine HREF verwenden, die auf den Containerknoten im DOM verweist.

<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>

Nach dem Login kopieren

4. Veranstaltungen
In der folgenden Tabelle sind die im Tab-Plug-in verwendeten Ereignisse aufgeführt. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

5. Grundlegende Beispiele
1． Tag-Seite
Die Tab-Seite wird allgemein auch als Tab-Funktion bezeichnet.

//基本用法
<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>

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

Die Verwendung von data-target zum Binden oder nicht hat den gleichen Effekt

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

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

Nach dem Login kopieren

//事件，其他雷同

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

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

Nach dem Login kopieren

Für weitere Inhalte achten Sie bitte auf das Bootstrap-Thema: Bootstrap-Lern-Tutorial

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.