Bootstrap - Plugin Tab

Le schede sono state introdotte nel capitolo Elementi di navigazione Bootstrap . Combinando alcuni attributi di dati, è possibile creare facilmente un'interfaccia a schede. Con questo plug-in è possibile passare da pannelli di contenuto locale a schede o pillole, anche tramite menu a discesa.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di tab.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi abilitare le schede nei due modi seguenti:

• Via data attributes - devi aggiungere data-toggle = "tab" o data-toggle = "pill" alle ancore.

  Aggiungendo il file nav e nav-tabs classi alla scheda ulapplicherà lo stile della scheda Bootstrap , aggiungendo il filenav e nav-pillsle classi applicheranno lo styling della pillola .

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

• Via JavaScript - puoi abilitare le schede usando Javscript come sotto -

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

• Ecco un esempio di modi diversi per attivare singole schede:

// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
 
// Select first tab
$('#myTab a:first').tab('show') 

// Select last tab
$('#myTab a:last').tab('show') 

// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')

Effetto dissolvenza

Per ottenere un effetto di dissolvenza per le schede, aggiungi .fade a ogni .tab-pane. Anche il primo riquadro a schede deve avere.in per sfumare correttamente nel contenuto iniziale -

<div class = "tab-content">
   <div class = "tab-pane fade in active" id = "home">...</div>
   <div class = "tab-pane fade" id = "svn">...</div>
   <div class = "tab-pane fade" id = "ios">...</div>
   <div class = "tab-pane fade" id = "java">...</div>
</div>

Esempio

Un esempio di plug-in di tabulazione che utilizza attributi di dati ed effetto di dissolvenza è mostrato nell'esempio seguente:

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </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>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed 
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the 
         Darwin foundation. iOS is Apple's mobile version of the OS X 
         operating system used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
   
</div>

Metodi

.$().tab- Questo metodo attiva un elemento scheda e un contenitore di contenuti. La scheda dovrebbe avere un'estensionedata-target o un href targeting di un nodo contenitore nel DOM.

<ul class = "nav nav-tabs" id = "myTab">
   <li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
   .....
</ul>

<div class = "tab-content">
   <div class = "tab-pane active" id = "home">...</div>
   .....
</div>

<script>
   $(function () {
      $('#myTab a:last').tab('show')
   })
</script>

Esempio

L'esempio seguente mostra l'uso del metodo del plug-in tab .tab. Qui nell'esempio è attivata la seconda scheda iOS -

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </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>Tutorials Point is a place for beginners in all technical areas. 
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin 
         foundation. iOS is Apple's mobile version of the OS X operating system 
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for 
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, 
         Web Logic etc.</p>
   </div>
   
</div>

<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

Eventi

La tabella seguente elenca gli eventi su cui lavorare con il plugin tab. Questo evento può essere utilizzato per agganciarsi alla funzione.

$('a[data-toggle = "tab"]').on('show.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

$('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
   e.target // activated tab
   e.relatedTarget // previous tab
})

Esempio

L'esempio seguente mostra l'uso degli eventi del plug-in della scheda. Qui nell'esempio verranno visualizzate le schede visitate correnti e precedenti -

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </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>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of 
         the technology with simple examples.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by 
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and 
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>
   
   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java 
         application for load and performance testing.</p>
   </div>
   
   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be 
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text(); 
         
         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text(); 
         
         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>