schede bootstrap (Tab) widget di

Scheda (Tab) in elementi di navigazione Bootstrap introdotti nel capitolo. Grazie alla combinazione di una serie di attributi di dati, è possibile creare facilmente una interfaccia scheda. Con questo plugin, è possibile inserire contenuti in schede o schede capsula e anche a discesa scheda del menu.

Se si vuole fare riferimento alle singole funzioni di plug-in, è necessario fare riferimentotab.js.O, come Bootstrap plug Panoramica capitolo citato, è possibile fare riferimento abootstrap.jso versione compressa delbootstrap.min.js.

uso

È possibile attivare le schede in due modi:

• Attraverso gli attributi dei dati: È necessario aggiungere i dati ginocchiera = "tab"odati-Toggle = "pillola"per ancorare i collegamenti di testo.

  Nav nav-schedee aggiungere classe alul,e sarà applicato Bootstrap stile di etichetta , e aggiungerenavnav-pilloleULclasse, e verrà applicata Bootstrap stile capsula .

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

• In JavaScript: È possibile utilizzare le schede per consentire javscript, come segue:

  $ ( '# MyTab a'). Fare clic (function (e) {
    e.preventDefault ()
    $ (This) .tab ( 'show')
  })
  

  L'esempio seguente mostra diversi modi per attivare le varie schede:

  // Seleziona il nome della scheda di $ ( '# mytab un [href = "# profilo"]'). Tab ( 'show')
  
  // Seleziona la prima scheda $ ( '# mytab una: prima') scheda ( 'show').
  
  . // Seleziona l'ultima scheda $ ( '# mytab una: ultima') scheda ( 'show')
  
  // Seleziona la terza scheda (zero-indicizzati)
  $ ( '# MyTab li: eq (2) un') scheda ( 'show').
  

effetto dissolvenza

Se è necessario impostare le tabulazioni dissolvenza effetto, aggiungere.fade dietro ogni .tab-riquadro.La prima scheda deve essere aggiunto.in classe a svanire nel contenuto originale, come illustrato nei seguenti esempi:

<Div class = "scheda-content">
	<Div class = "scheda-riquadro dissolvenza in attivo" id = "casa"> ... </ div>
	<Div class = "scheda-riquadro di dissolvenza" id = "svn"> ... </ div>
	<Div class = "scheda-riquadro di dissolvenza" id = "ios"> ... </ div>
	<Div class = "scheda-riquadro di dissolvenza" id = "java"> ... </ div>
</ Div>

Esempi

L'esempio seguente dimostra l'uso di schede di dati di proprietà (Tab) e plug-dissolvenza effetti:

I risultati sono i seguenti:

modo

<Ul class = "nav nav-tabs" id = "mytab">
	<Li class = "attivo"> ​​<a href="#identifier" data-toggle="tab"> casa </a> </ li>
	.....
</ Ul>
<Div class = "scheda-content">
	<Div class = "scheda-riquadro attivo" id = "casa"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# Mytab una: ultima') scheda ( 'show')
	})
</ Script>

Esempi

L'esempio seguente mostra la scheda (Tab) plug-in uso metodi.tab.Nel presente esempio, la seconda scheda èIOS attivi:

I risultati sono i seguenti:

evento

La seguente tabella elenca le schede (tab) plug-in da utilizzare in caso. Questi eventi possono essere utilizzate quando la funzione di hook.

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

Esempi

L'esempio seguente dimostra l'uso di schede (tab) plug-in evento. Nel presente esempio, visualizzerà la corrente e le schede visitati precedenti:

I risultati sono i seguenti: