JS Tab (tab.js)
Karty są używane do oddzielania materiałów w różnych szyb, gdzie każdy panel jest widoczny po jednym na raz.
Samouczek o Tabs, przeczytaj nasze Bootstrap Tabs/Pills Tutorial .
Zakładka Plugin Klasy
| Klasa | Opis | Przykład |
|---|---|---|
| .nav nav-tabs | Tworzy zakładki nawigacji | Spróbuj |
| .nav-justified | Sprawia nawigacji tabs/pills równych szerokościach rodzica, na ekranach szerszy niż 768px. Na mniejszych ekranów, klapki nav są układane | Spróbuj |
| .tab-content | Wraz z .tab-pane i data-toggle="tab" , to sprawia, że toggable kartę | Spróbuj |
| .tab-pane | Wraz z .tab-content i data-toggle="tab" , to sprawia, że toggable kartę | Spróbuj |
Via data-* Atrybuty
Dodaj data-toggle="tab" na każdej karcie i dodać .tab-pane klasy z unikalnym identyfikatorem każdej karcie i owinąć je w .tab-content klasy.
Przykład
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h3>HOME</h3>
<p>Some
content.</p>
</div>
<div id="menu1" class="tab-pane
fade">
<h3>Menu 1</h3>
<p>Some
content in menu 1.</p>
</div>
</div>
Spróbuj sam " za pośrednictwem JavaScript
Włącz ręcznie za pomocą:
Przykład
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Spróbuj sam " Opcje Tab
| None |
Metody Tab
Poniższa tabela zawiera listę wszystkich dostępnych metod TAB.
| metoda | Opis | Spróbuj |
|---|---|---|
| .tab("show") | Przedstawia kartę | Spróbuj |
zakładka Zdarzenia
Poniższa tabela zawiera listę wszystkich dostępnych wydarzeń TAB.
| Zdarzenie | Opis | Spróbuj |
|---|---|---|
| show.bs.tab | Występuje, gdy karta ma być pokazane. | Spróbuj |
| shown.bs.tab | Występuje, gdy karta jest w pełni pokazane (po zakończeniu przejścia CSS) | Spróbuj |
| hide.bs.tab | Występuje, gdy karta ma być ukryta | Spróbuj |
| hidden.bs.tab | Występuje, gdy karta jest całkowicie ukryty (po zakończeniu przejścia CSS) | Spróbuj |
Wskazówka: Użyj jQuery event.target i event.relatedTarget uzyskać aktywną kartę i poprzednią kartę aktywny:
Przykład
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
}); Spróbuj sam "