
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Personalizziamo con i CSS un pannello a tab ottenuto con lo script Yetii
Le tab sono uno degli elementi di navigazione più comuni. Abbiamo esplorato alcune possibilità di personalizzazione con i CSS in diversi articoli: a partire dalle tab minimali e senza grafica di Un menu a tab con i CSS, passando alle Tab grafiche con i CSS fino alle Tab centrate con i CSS.
Le tab sono comuni anche nelle interfacce web e sono usate estensivamente in diversi siti (ad esempio qui su HTML.it o su Yahoo!) per ottenere informazioni facilmente consultabili in uno spazio ristretto. Vedremo in questo appuntamento una possibile implementazione di interfacce a tab con un pizzico di Javascript, partendo dal markup necessario fino ad arrivare alla personalizzazione con grafica e CSS. Ecco una piccola anteprima dell’esempio e il suo screenshot:
Per realizzare una soluzione come quella dell’esempio una delle prime cose da fare è la scelta dello script. Le soluzioni a questo punto sono diverse:
In quanto ai plugin, rimando agli articoli Tab semplici e accessibili con JQuery e Un’interfaccia a tab con il plugin JQuery.tabs nella sezione Javascript.
Per questo articolo ho optato invece per una soluzione non basata su librerie che sia facilmente pronta all’uso. Per mettere in pratica in casi reali una soluzione come quella dell’esempio che accompagna l’articolo non saranno necessarie conoscenze di Javascript. Vedremo poi come, una volta capito come impostare il markup, la personalizzazione del CSS sia piuttosto semplice e consenta molta libertà.
Tra i molti script disponibili in rete ho scelto Yetii, uno script semplice e leggero (circa 2kb) con diverse funzionalità interessanti: è possibile scegliere la tab inizialmente aperta e anche avere tab temporizzate. Da evidenziare che lo script è totalmente non intrusivo, dato che non necessita di aggiunta di eventi in linea nel markup e gli esempi degradano bene con Javascript disabilitato.
Nota bene: lo script nella versione originale ha problemi di compatibilità con IE 5.0 e IE5.5: con una piccola modifica, ho esteso la compatibilità anche a questi due browser.
Il markup di base per lo script ha un formato piuttosto standard, ma consente comunque una buona flessibilità. Per prima cosa sarà necessario un contenitore generico con id specificato che contenga il tutto. Nel caso dell’esempio, questo id è tabcont1. La lista di navigazione a tab dovrà contenere lo stesso id, a cui verrà aggiunto il suffisso “-nav”: per l’esempio sarà quindi tabcont1-nav. I vari pannelli dovranno avere infine la classe “tab”.
Per comodità di personalizzazione con i CSS e soprattutto per poter consentire diverse tab nella stessa pagina, ho aggiunto le classi tabpanel al contenitore generico e tabnav alla navigazione. Se vorrete adattare l’esempio alle vostre pagine si tratterà quindi di:
Questi i passi necessari per la struttura generale dell’esempio, di cui riporto la parte essenziale di codice HTML:
<div id=“tabcont1” class=“tabpanel”>
<ul id=“tabcont1-nav” class=“tabnav”>
<!– contenuto lista di navigazione –>
</ul>
<div id=”tab1″ class=“tab”>
<!– contenuto primo pannello –>
</div>
<div id=”tab2″ class=“tab”>
<!– contenuto secondo pannello –>
</div>
</div>
Una volta stabilite una o più interfacce a tab nella pagina, aggiungere lo script
è piuttosto semplice. Per prima cosa andrà linkato nella sezione head
di pagina:
<script type=”text/javascript” src=”yetii.js”></script>
L’altra aggiunta da fare è per attivare lo script, inserendo un paio di righe
prima della chiusura dell’elemento body
a fondo pagina:
<!– … fine pagina –>
<script type=”text/javascript”>
var tabber=new Yetii(‘tabcont1‘);
tabber.init();
</script>
</body>
In grassetto noterete che è stato indicato l’id dell’elemento che contiene l’interfaccia a tab: è questa l’unica modifica che dovrete apportare nelle righe appena viste per adattare lo script alle vostre pagine.
Visti brevemente il markup e il Javascript, non ci resta che procedere con la parte
centrale dell’esempio, ovvero le tab.
Per buona parte mi sono basato sul lavoro risultante dall’articolo
Menu con tab grafiche.
Da notare che per aggiungere flessibilità alle tab, sono necessari nel markup elementi span
all’interno dei link:
<ul id=”tabcont1-nav” class=”tabnav”>
<li><a href=”#tab1″><span>News</span></a></li>
<li><a href=”#tab2″><span>Articoli</span></a></li>
<li><a href=”#tab3″><span>Video</span></a></li>
<li><a href=”#tab4″><span>Download</span></a></li>
</ul>
Per quanto riguarda il CSS dell’esempio, rimando all’articolo sulle tab grafiche per i dettagli implementativi. C’è però una piccola differenza rispetto alla versione originale, ovvero il bordo mancante sulla tab aperta: si tratta una caratteristica piuttosto comune nelle tab, oltre che molto funzionale.
Per ottenere la tab attiva aperta in maniera cross-browser, il procedimento non è stato dei più semplici: è bastato però alla fine imitare il bordo inferiore del menu attraverso una piccola linea di sfondo, su cui i diversi bordi delle tab poggiano. La tab aperta ha un bordo inferiore bianco, che copre quindi l’immagine di sfondo della lista.
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}
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.
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.
Se vuoi aggiornamenti su Interfacce a tab con CSS e Javascript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Bjarne Stroustrup, creatore del linguaggio di programmazione C++, illustra le caratteristiche del suo linguaggio paragonandolo a C, il linguaggio di […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Pochi giorni al rilascio della versione 10 di Fedora, la distribuzione evoluta derivata da Red Hat e sempre all’avanguardia per soluzioni e innovazioni
In attesa dell’imminente uscita della Adobe Creative Suite 4, vediamo quali novità saranno incluse in Flash.
Come promessovi qualche settimana fa eccovi finalmente la recensione completa di una delle distribuzioni più utilizzate nel mondo Linux. Stiamo […]
Un workflow dettagliato e ricco di suggerimenti pratici per realizzare applicazioni Web con ASP.NET MVC, facendo attenzione alla modellazione dei dati come alla user experience