onglets Bootstrap (Tab) un widget

Tab (Tab) dans les éléments de navigation Bootstrap introduits dans le chapitre. En combinant un certain nombre d'attributs de données, vous pouvez facilement créer une interface de tabulation. Avec ce plugin, vous pouvez mettre du contenu dans des onglets ou onglets de capsules et même descendre onglet du menu.

Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référencertab.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.

usage

Vous pouvez activer les onglets de deux façons:

• Grâce à des données attributs:Vous devez ajouter desdonnées-toggle = "tab"ou lesdonnées-toggle = "pilule"pour ancrer les liens texte.

  Nav nav-ongletset ajoutez classe à laul,et sera appliqué Bootstrap style d'étiquette , et ajouternavnav-pilulesULclasse, et sera appliqué Bootstrap style capsule .

  <ul class = "nav nav-onglets">
  	<Li> <a href="#identifier" data-toggle="tab"> Accueil </a> </ li>
  	...
  </ Ul>
  

• Par JavaScript: Vous pouvez utiliser les onglets pour activer javscript, comme suit:

  $ ( '# MyTab a'). Cliquez sur (function (e) {
    e.preventDefault ()
    $ (Ce) .tab ( 'show')
  })
  

  L'exemple suivant illustre les différentes façons d'activer les différents onglets:

  // Sélectionnez le nom de l'onglet par $ ( '# mytab a [href = "# profil"]'). Tab ( 'show')
  
  // Sélectionnez le premier onglet $ ( '# mytab a: first') onglet ( 'show').
  
  . // Sélection du dernier onglet $ ( '# mytab a: last') onglet ( 'show')
  
  // Sélection du troisième onglet (zéro-indexé)
  $ ( 'MyTab li #: eq (2) a') onglet ( 'show').
  

effet Fade

Si vous avez besoin de définir des tabulations fanent effet, ajouter.fade derrière chaque .tab-volet.Le premier onglet doit être ajouté.in classe à disparaître dans le contenu original, comme le montrent les exemples suivants:

<Class Div = "tab-content">
	<Class Div = "tab-volet fondu active" id = "home"> ... </ div>
	<Class Div = "tab-volet fade" id = "svn"> ... </ div>
	<Class Div = "tab-volet fade" id = "ios"> ... </ div>
	<Class Div = "tab-volet fade" id = "java"> ... </ div>
</ Div>

Exemples

L'exemple suivant illustre l'utilisation des onglets de données de propriété (Tab) et branchez-fader effets:

Les résultats sont les suivants:

manière

<Ul class = "nav nav-tabs" id = "mytab">
	<Class = Li "active"> <a href="#identifier" data-toggle="tab"> Accueil </a> </ li>
	.....
</ Ul>
<Class Div = "tab-content">
	<Class = Div id "tab-volet actif" = "home"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# Mytab a: last') onglet ( 'show')
	})
</ Script>

Exemples

L'exemple suivant illustre l'onglet (Tab) plug-in de l' utilisationde méthodes.Dans le présent exemple, le deuxième onglet estiOS actifs:

Les résultats sont les suivants:

événement

Le tableau suivant dresse la liste des onglets (Tab) plug-in pour être utilisé dans l'événement. Ces événements peuvent être utilisés lorsque la fonction de crochet.

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

Exemples

L'exemple suivant illustre l'utilisation des onglets (Tab) plug-in événement. Dans le présent exemple, il affiche le courant et les onglets visités précédents:

Les résultats sont les suivants: