Bootstrap zakładki (Tab) widget

Zakładka (Tab) w Bootstrap elementów nawigacyjnych wprowadzonych w tym rozdziale. Łącząc szereg atrybutów danych, można łatwo stworzyć interfejs tabulatora. Z tej wtyczki, które można umieścić zawartość w kartach lub zakładkach kapsułek, a nawet spaść kartę menu.

Jeśli chcesz zapoznać się z poszczególnymi funkcjami typu plug-in, trzeba odwołaćtab.js.Albo, jak Bootstrap Przegląd wtyczki rozdziale wspomniano, można zwrócić się dobootstrap.jslub skompresowanej wersjibootstrap.min.js.

zwyczaj

Można włączyć karty w dwojaki sposób:

• Poprzez dane atrybuty: Trzeba dodać data-przełączanie = "Tab"lubdane-przełączania = "pigułka"zakotwiczyć linki tekstowe.

  Nav nav-tabsi dodać klasę doul ibędą stosowane Bootstrap styl etykiety i dodaćnavnav-pigułkiulclass, i będzie stosowana Bootstrap styl kapsułki .

  <ul class = "nav nav-tabs">
  	<Li> <a href="#identifier" data-toggle="tab"> główna </a> </ li>
  	...
  </ Ul>
  

• Przez JavaScript: Można korzystać z zakładek, aby umożliwić javscript, co następuje:

  $ ( '# MyTab a'). Click (function (e) {
    e.preventDefault ()
    $ (This) .tab ( "Show")
  })
  

  Poniższy przykład demonstruje różne sposoby, aby aktywować różne zakładki:

  // Wybierz nazwę karty, $ ( '# MyTab a [href = "# profil"]'). Tab ( "Show")
  
  // Wybierz pierwszą zakładkę $ ( '# MyTab się: najpierw ") zakładki (" show ").
  
  . // Wybierz Ostatnia zakładka $ ( '# MyTab się: Ostatni ") zakładki (" show ")
  
  // Wybierz zakładkę trzeci (zero-indeksowane)
  $ ( '# MyTab li: eq (2) ") zakładka (" Show ").
  

efekt Fade

Jeśli trzeba ustawić zakładki zanikać efekt, dodać.fade za każdym .tab okienku.Pierwsza karta należy dodać.in klasy zanikać w pierwotnej treści, jak to przedstawiono w następujących przykładach:

<Div class = "tab-content">
	<Div class = "tab-szyba blaknięcie czynnie" id = "Home"> ... </ div>
	<Div class = "tab-szyba blaknięcie" id = "svn"> ... </ div>
	<Div class = "tab-szyba blaknięcie" id = "ios"> ... </ div>
	<Div class = "tab-szyba blaknięcie" id = "java"> ... </ div>
</ Div>

Przykłady

Poniższy przykład demonstruje użycie kart danych nieruchomości (TAB) i podłącz tłumiku efekty:

Wyniki przedstawiają się następująco:

sposób

<Ul class = "nav nav-tabs" id = "MyTab">
	<Li class = "aktywny"> <a href="#identifier" data-toggle="tab"> główna </a> </ li>
	.....
</ Ul>
<Div class = "tab-content">
	<Div class = "tab-aktywne okienko" id = "Home"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# MyTab się: Ostatni ") zakładki (" show ")
	})
</ Script>

Przykłady

Poniższy przykład pokazuje kartę (karta) plug-in użycia metod.tab.W niniejszym przykładzie, druga zakładka jest aktywnaiOS:

Wyniki przedstawiają się następująco:

wydarzenie

Poniższa tabela zawiera zakładki (TAB) plug-in, które mają być używane w tym wydarzeniu. Zdarzenia te mogą być wykorzystywane, gdy funkcja haka.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

Przykłady

Poniższy przykład demonstruje użycie JOT (TAB) plug-in imprezy. W niniejszym przykładzie, będzie on wyświetlany bieżący i poprzedni odwiedzanych zakładek:

Wyniki przedstawiają się następująco: