TargetTabs: plugin jQuery per tab dinamiche

TargetTabs è un plugin jQuery per la creazione di tab dinamiche e semplici che possano contenere contenuto di vario tipo: video, testo, immagini e altro. 

Come sempre il plugin è completamente free. Questa è la prima versione quindi mi raccomando fatemi sapere i vostri feedback così posso migliorare il mio lavoro!

DEMO 

01. Panoramica di TargetTabs

Esistono diversi metodi per realizzare delle tab: dal più semplice uso di show()/hide() ciclico all’uso di next() per calcolare la tab successiva. Nel plugin di oggi ho usato la funzione siblings (fratelli) per calcolare tutte le altre tab di contenuto, le tabs recuperate con siblings vengono eliminate e li viene rimossa un eventuale classe .active attiva.

La classe attiva viene impostata sull’elemento cliccato così da poter essere stilizzato al meglio coi css.

Il Css del plugin può essere modificato (ovviamente) come meglio credete a seconda delle vostre necessità.

	ul.tabs {
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
	ul.tabs li {
		display: block;
		width: auto;
		height: 30px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a {
		display: block;
		text-decoration: none;
		width: auto;
		height: 29px;
		padding: 0px 20px;
		line-height: 30px;
		border: solid 1px #ddd;
		border-width: 1px 1px 0 0;
		margin: 0;
		background: #f5f5f5;
		font-size: 13px; }
	ul.tabs li a.active {
		background: #fff;
		height: 30px;
		position: relative;
		top: -4px;
		padding-top: 4px;
		border-left-width: 1px;
		margin: 0 0 0 -1px;
		color: #111;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	ul.tabs li:first-child a.active {
		margin-left: 0; }
	ul.tabs li:first-child a {
		border-width: 1px 1px 0 1px;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; }
	ul.tabs li:last-child a {
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }

	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }

	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }

02. Uso di TargetTabs

L’uso di TargetTabs è molto semplice ma efficace:

<ul class="tabs">
	<li><a class="active" href="#1">Sezione1</a></li>
	<li><a href="#2">Sezione2</a></li>
	<li><a href="#3">Sezione3</a></li>
</ul><!--tabs-->

 <ul class="tabs-content"> <!--wrapper delle tabs-->

      <li class="active" id="1">
	<p>Sezione 1</p>
      </li><!--sezione1-->

    <li id="2">
       <p>Sezione2</p>
    </li><!--sezione2-->

    <li id="3">
	<p>Sezione 3</p>
    </li><!--sezione3-->

 </ul><!--contenuto tab-->

Come vedete inserite i link alle tabs in ul.tabs mi raccomando nel percorso href indicate dove far puntare il click ( sezione).

Tabs-content è un contenitore dove potrete inserire il contenuto della vostra tab. Ovviamente potrete racchiudere all’interno di ogni tab contenuto di vario tipo: video, embed, immagini e molto altro.

NOTA: accertatevi di aver inserito anche la libreria jQuery e il file per la gestione delle tabs:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/target-tabs.js"></script>

DEMO | DOWNLOAD 

04. Feedback e supporto

Potete segnalare bug e nuove feature che vorreste vedere direttamente nei commenti qui sotto all’articolo o nella mia pagina Facebook. Buon sviluppo a tutti spero che il plugin vi sia utile!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Consigli per la creazione di una landing page di successo

Consigli per la creazione di una landing page di successo