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!
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>
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!
Semplice ma di grande utilità!