Bootstrap Tabs (Tab) Widget

Tab (Tab) in Bootstrap Navigationselemente im Kapitel eingeführt. Durch eine Reihe von Datenattributen kombinieren, können Sie einfach eine Registerkarte Schnittstelle erstellen. Mit diesem Plugin können Sie in Tabs oder Registerkarten Kapselinhalt setzen und sogar Menüreiter Dropdown.

Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Sietab.js. verweisenOder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.

Verwendung

Sie können Registerkarten auf zwei Arten aktivieren:

• Durch die Datenattribute:Sie müssenDaten-Togglehinzufügen= "Tab"oderDaten-Toggle = "Pille"Text - Links zu verankern.

  NAV-Basis-Registerkartenund fügen Klasse in dieulund wird Bootstrap angewendet werden Aufkleberart undnavnav-Pillen hinzufügen KlasseULund wird Bootstrap angewendet werden Kapsel Stil .

  <Ul class = "nav nav-Tabs">
  	<Li> <a href="#identifier" data-toggle="tab"> Startseite </a> </ li>
  	...
  </ Ul>
  

• Mit JavaScript: Sie können die Registerkarten Javscript zu aktivieren, wie folgt:

  $ ( '# MyTab a'). Klicken Sie auf (function (e) {
    e.preventDefault ()
    $ (This) .tab- ( 'show')
  })
  

  Das folgende Beispiel zeigt verschiedene Möglichkeiten, die verschiedenen Registerkarten zu aktivieren:

  Wählen Sie den Namen der Registerkarte // durch $ ( '# MyTab a [href = "# profile"]'). Tab ( 'show')
  
  // Das erste Register $ Wählen Sie ( '# MyTab ein: zuerst') Register ( "Show").
  
  . Wählen Sie das letzte Register $ // ( '# MyTab ein: letzte') Registerkarte ( 'show')
  
  // Die dritte Registerkarte auswählen (Null-indexiert)
  $ ( '# MyTab li: eq (2) a') Register ( "Show").
  

Fade-Effekt

Wenn Sie Registerkarten Effekt verblassen festlegen müssen, fügen Sie hinter jedem.tab- Scheibe .fade.Der erste Reiter muss.in - Klasse hinzugefügt werden , in dem ursprünglichen Inhalt zu verblassen, wie in den folgenden Beispielen gezeigt:

<Div class = "Tab-content">
	<Div class = "Tab-Fenster-Einblendung aktiv" id = "home"> ... </ div>
	<Div class = "Tab-Fenster-fade" id = "svn"> ... </ div>
	<Div class = "Tab-Fenster-fade" id = "ios"> ... </ div>
	<Div class = "Tab-Fenster-fade" id = "java"> ... </ div>
</ Div>

Beispiele

Das folgende Beispiel zeigt die Verwendung von Eigenschaftsdaten Registerkarten (Tab) und Plug-Fade-Effekte:

Die Ergebnisse sind wie folgt:

Weg

<Ul class = "nav nav-Tabs" id = "MyTab">
	<Li class = "aktiv"> <a href="#identifier" data-toggle="tab"> Startseite </a> </ li>
	.....
</ Ul>
<Div class = "Tab-content">
	<Div class = "Tab-Fenster-aktiv" id = "home"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# MyTab ein: letzte') Registerkarte ( 'show')
	})
</ Script>

Beispiele

Das folgende Beispiel zeigt die Registerkarte (Tab) Plug-in - Methoden.tab- Nutzung.Im vorliegenden Beispiel ist die zweite Registerkarte aktiviOS:

Die Ergebnisse sind wie folgt:

Ereignis

Die folgende Tabelle listet die Laschen (Tab) Plug-in für den Fall verwendet werden. Diese Ereignisse können, wenn die Hook-Funktion verwendet werden.

$('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 // 前一个激活的标签页
})

Beispiele

Das folgende Beispiel zeigt die Verwendung von Laschen (Tab) Plug-in-Ereignis. Im vorliegenden Beispiel wird es den aktuellen und die vorherigen besuchten Registerkarten angezeigt:

Die Ergebnisse sind wie folgt: