Interfacce a tab con CSS e Javascript
di: Alessandro Fulciniti 20 Novembre 2007
Da notare infine che lo script aggiunge la classe "active" al link corrispondente alla tab attiva e si occupa in maniera totalmente trasparente di nascondere e mostrare i vari pannelli. Non ci resta quindi che vedere il CSS dell'esempio per intero:
ul.tabnav{width: 100%;overflow:hidden;list-style: none;
margin: 0;padding:0;background:url(line.png) repeat-x bottom}
ul.tabnav li{float: left;margin: 0 0 0 0.5em;padding: 0}
ul.tabnav a{float: left;padding: 0 0 0 0.8em;
background: url(tab.png) no-repeat top left;
text-decoration: none;color: #222;
border-bottom: 1px solid #D7D7D7}
ul.tabnav span{float: left;padding: 0.6em 0.8em 0.6em 0;
background: url(tab.png) no-repeat top right;cursor: pointer}
ul.tabnav a.active,ul.tabnav a:hover{
background: url(tab2.png) no-repeat top left;
border-bottom:1px solid #FFF}
ul.tabnav a.active span,ul.tabnav a:hover span{
background: url(tab2.png) no-repeat top right;color: #184D8A}
Secondo esempio
Ho preparato anche un secondo esempio che mostra alcune possibilità avanzate dello script. Il primo pannello a tab infatti mostra la seconda tab inizialmente aperta, mentre la seconda interfaccia ha le tab circolari ogni tre secondi. I due contenitori generici hanno rispettivamente id="tabcont1" e id="tabcont2", mentre per quanto riguarda lo script, ecco la parte prima della chiusura dell'elemento body:
<script type="text/javascript">
var tabber=new Yetii('tabcont1',2); //la seconda tab inizialmente aperta
var tabber2=new Yetii('tabcont2');
tabber.init();tabber2.init(3); //tab circolari ogni tre secondi
</script>
Per il primo pannello, dopo l'id del div su cui applicare le tab, andrà specificato
dopo la virgola il numero che indica la tab da aprire all'avvio della pagina; mentre
nel secondo caso, dentro le parentesi della chiamata init andrà indicato
il numero di secondi di temporizzazione delle tab.
Conclusioni
Abbiamo visto in questo articolo una possibile implementazione delle tab, focalizzandoci sulla configurazione dello script e il markup necessario. Per quanto riguarda la personalizzazione con grafica e CSS, gli esempi qui presentati dovrebbero poter fornire al lettore un buon punto di partenza.
La compatibilità dei due esempi è decisamente buona: la resa visiva e la funzionalità dell'interfaccia sono state testate con successo su Internet Explorer dalla versione 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari. Codice ed esempi sono disponibili per il download. Alla prossima.
Guide CSS
Responsive Desing, la guidaProgettare siti da fruire su dispositivi diversi è imprescindibile... |
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |