English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le schede (Tab) in Elementi di navigazione Bootstrap Il capitolo introduttivo ha spiegato come combinare alcune proprietà dati per creare facilmente un'interfaccia di schede. Con questo plugin puoi posizionare il contenuto all'interno delle schede, delle schede a capsula o anche delle schede a menù a discesa.
Se desideri utilizzare funzionalità specifiche del plugin, devi citare tab.jsoppure, come Panoramica dei plugin Bootstrap Come menzionato nel capitolo bootstrap.js o la versione compressa bootstrap.min.js.
Puoi abilitare le schede in due modi:
attraverso l'attributo dati：Devi aggiungere data-toggle="tab" o data-toggle="pill" testo degli link diancora.
alla nav e nav-tabs alla ul All'interno, verrà applicata la classe Bootstrap stili di etichettae aggiungere nav e nav-pills alla ul All'interno, verrà applicata la classe Bootstrap Stile a capsula.
<ul> <li><a href="#identifier" data-toggle="tab">Home</a></li> ... </ul>
attraverso JavaScript：Puoi abilitare le schede utilizzando JavaScript, come segue:
$('#myTab a').click(function(e) {
e.preventDefault()
$(this).tab('show')
}Esempio seguente dimostra come attivare le varie schede in modi diversi:
// Seleziona la scheda tramite nome
$('#myTab a[href="#profile"]').tab('show')
// Seleziona la prima scheda
$('#myTab a:first').tab('show')
// Seleziona l'ultima scheda
$('#myTab a:last').tab('show');
// Seleziona la terza scheda (partendo da 0 come indice)
$('#myTab li:eq(2) a').tab('show')Se si desidera impostare un effetto di dissolvenza in e out per le schede, aggiungere .fade a ciascuna .tab-pane dopo di che. La prima scheda deve aggiungere .in Classe, per mostrare il contenuto iniziale con dissolvenza, come nell'esempio seguente:
<div> <div id="home">...</div> <div id="svn">...</div> <div id="ios">...</div> <div id="java">...</div> </div>
Esempio seguente dimostra l'uso del plugin schede (Tab) con l'effetto di dissolvenza in e out dei dati:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap esempio - schede (Tab) plugin</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> Sito Web di Base di Tutorial </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>Base Tutorial Network è un sito che offre le ultime tecnologie web, offre documentazione tecnica relativa alla costruzione di siti web gratuitamente, aiutando i fan delle tecnologie web a iniziare rapidamente e a costruire i loro siti web. Il volo di un principiante è il miglior inizio - imparare le basi ti permetterà di andare più lontano.</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple <p>TV iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, iOS è la versione mobile di Apple.</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter è un software di test open source. È un'applicazione Java pura al 100%, utilizzata per test di carico e prestazioni.</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans (EJB) è una struttura di sviluppo per creare applicazioni aziendali ad alta scalabilità e potenti, distribuite su J2EE compatibili con server applicativi (come JBOSS, Web Logic, ecc.). </p> </div> </div> </body> </html>Prova a vedere ‹/›
I risultati sono come segue:
.tab()：Questa方法是 attivare l'elemento di scheda e il contenitore del contenuto. La scheda deve essere utilizzata con un data-target oppure un puntatore a un nodo contenitore del DOM href.
<ul id="myTab">
<li><a href="#identifier" data-toggle="tab">Home</a></li>
.....
</ul>
<div>
<div id="home">...</div>
.....
</div>
<script>
$((function() {
$('#myTab a:last').tab('show');
}
</script>Il seguente esempio dimostra i metodi del plugin di schede (Tab) di Bootstrap. .tab utilizzo. Nel presente esempio, la seconda scheda iOS è attivato:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Esempio Bootstrap - Metodi del plugin di schede (Tab)</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">Sito Web di Base di Tutorial</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Base Tutorial Network è un sito che offre le ultime tecnologie web, offre documentazione tecnica relativa alla costruzione di siti web gratuitamente, aiutando i fan delle tecnologie web a iniziare rapidamente e a costruire i loro siti web. Il volo di un principiante è il miglior inizio - imparare le basi ti permetterà di andare più lontano.</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple
<p>TV iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, iOS è la versione mobile di Apple.</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter è un software di test open source. È un'applicazione Java pura al 100%, utilizzata per test di carico e prestazioni.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) è una struttura di sviluppo per creare applicazioni aziendali ad alta scalabilità e potenti, distribuite su J2EE compatibili con server applicativi (come JBOSS, Web Logic, ecc.).
</p>
</div>
</div>
<script>
$((function() {
$('#myTab li:eq(1) a').tab('show');
});
</script>
</body>
</html>Prova a vedere ‹/›I risultati sono come segue:
La tabella seguente elenca gli eventi utilizzati nel plugin di schede (Tab) di Bootstrap. Questi eventi possono essere utilizzati come trigger nelle funzioni.
| Evento | Descrizione | Esempio |
|---|---|---|
| show.bs.tab | Questo evento viene attivato quando viene visualizzata l'etichetta di pagina, ma deve essere attivato prima che venga visualizzata una nuova etichetta di pagina. Utilizzare rispettivamente event.target e event.relatedTarget per localizzare l'etichetta di pagina attivata e l'etichetta di pagina attivata precedente. | $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
e.target // attivato etichetta di pagina
e.relatedTarget // La scheda attivata in precedenza
} |
| shown.bs.tab | Questo evento viene attivato quando viene visualizzata l'etichetta di pagina, ma deve essere attivato dopo che è stata visualizzata una certa etichetta di pagina. Utilizzare rispettivamente event.target e event.relatedTarget per localizzare l'etichetta di pagina attivata e l'etichetta di pagina attivata precedente. | $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
e.target // attivato etichetta di pagina
e.relatedTarget // La scheda attivata in precedenza
} |
Il seguente esempio dimostra l'uso degli eventi del plugin di schede (Tab). In questo esempio, verranno visualizzate le schede attualmente visitate e quelle visitate in precedenza:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Esempio - Plugin di Schede (Tab) Eventi</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
基础教程网</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">
Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Base Tutorial Network è un sito che offre le ultime tecnologie web, offre documentazione tecnica relativa alla costruzione di siti web gratuitamente, aiutando i fan delle tecnologie web a iniziare rapidamente e a costruire i loro siti web. Il volo di un principiante è il miglior inizio - imparare le basi ti permetterà di andare più lontano.</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS è un sistema operativo mobile sviluppato e pubblicato da Apple. È stato lanciato per la prima volta nel 2007 con iPhone, iPod Touch e Apple
<p>TV iOS deriva da OS X, condividono la base Darwin. OS X è il sistema operativo utilizzato sui computer Apple, iOS è la versione mobile di Apple.</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter è un software di test open source. È un'applicazione Java pura al 100%, utilizzata per test di carico e prestazioni.</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans (EJB) è una struttura di sviluppo per creare applicazioni aziendali ad alta scalabilità e potenti, distribuite su J2EE compatibili con server applicativi (come JBOSS, Web Logic, ecc.).
</p>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
// Ottenere il nome della scheda attiva corrente
var activeTab = $(e.target).text();
// Ottenere il nome della scheda attiva precedente
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});
</script>
</body>
</html>Prova a vedere ‹/›I risultati sono come segue: