css Zen Garden

Volete mostrare negli articoli o in un modulo dei contenuti in delle schede che si aprono al clic o al mouse over con effetto TABS (schede che si alternano orizzontalmente) o ACCORDION (scorrimento a scomparsa verticale) con un piacevole effetto Ajax? Allora vi serve un moduletto semplicissimo da usare e molto versatile, veloce, leggero e preciso nel fare il suo lavoro: Jtabs è quello che fa per voi.

Il modulo è prodotto da http://mybrisbane.net ma ve ne offro una versione modificata che potete scaricare da qui: scarica Jtabs_tonicopi.

Il modulo è stato poi ulteriormente modificato dal grande Vamba che è autore anche di questo bellissimo sito che vi invito a visitare: http://www.mamboitalia.com

Una volta scaricato nel vostro computer ed installato nel modo usuale andrete in gestione moduli a configurarlo.

Nelle prima opzione tabs_type scegliete se visualizzare il modulo a Tabs (schede) classiche disposte in orizzontale Horizontal (Tabs) oppure nella versione Accordion(Vertical Tabs) per vederle nella disposizione verticale con la tipica apertura a fisarmonica.

Nella seconda opzione potrete scegliere sia per la visione verticale che per quella orizzontale se far aprire le tabs semplicemente passandogli sopra con il mouse oppure con il classico clic, che è l'opzione predefinita.

In tab lable scriveremo il titolo della tab e nel riquadro successivo HTML,text inseriremo il testo o il codice html che vogliamo mostrare nella TAB. Questo per tutte le tabs che ci servono. Il modulo originale prevedeva dieci tabs ma io ne ho aggiunte altre dieci, che abbondare male non fa. Noi utilizzeremo solo quelle che ci servono. Dato che c'ero ho aggiunto anche la possibilità di inserire il Suffisso Classe CSS modulo (che a mio avviso è meglio che ci sia sempre) che rende facilmente personalizzabile il modulo.
Se non siete molto ferrati in linguaggio HTML e dovete inserire una tabella, oppure immagini, link e altro, vi suggerisco di fare le vostre composizioni in un articolo di Joomla! usando l'editor, poi, cliccando sul tastino html, copiate il codice che andrete ad incollare nella tab del modulo Jtabs.

Adesso non avete che da pubblicare il modulo in un posizione esistente del vostro template oppure dentro un articolo inserendo la classica posizione modulo nei contenuti e vedere l'aspetto del vostro modulo. Il modulo è scritto bene e si adatterà al meglio sulla maggior parte dei templates. Ma se volete personalizzarlo ulteriormente non fate come me che mi stavo ad applicare in laboriose modifiche manuali al suo css.... Poichè il modulo in questione utilizza jQuery, che è una libreria JavaScript che semplifica e velocizza simpatici effetti animati e Ajax, e specificatamente un plugin di jQuery, possiamo utilizzare i templates che troviamo nel loro sito per personalizzare in modo velocissimo ed incredibilmente efficace il nostro modulo. Andate qui http://jqueryui.com/themeroller/ e prendete in considerazione solo le prime due caratteristiche di questo plugin Accordion e Tabs che sono quelle utilizzate dal nostro modulo jtabs. Guardate il menù nella colonna sinistra e cliccate su Gallery. Si apriranno 24 temi tra i quali scegliere quello che più si avvicina al risultato che volete ottenere. Ci cliccate sopra, guarderete e testerete l'effetto sulle vostre Tabs ed Accordion e quando avrete scelto il tema potete tornare nella colonna iniziale cliccando Roll Your Own. Da qui potrete rifinire la personalizzazione usando questo editor visuale incredibilmente potente e preciso. Alla fine, quando sarete pienamente soddisfatti dell'aspetto grafico ottenuto, cliccate sul pulsante arancione download theme, sempre nella colonna sinistra, che vi manderà in una nuova pagina da dove dovrete di nuovo cliccare sul pulsante DOWNLOAD, questa volta circa a metà pagina a destra. Una volta scaricato dezippate il file in una cartella del vostro computer.

Di tutto questo pacchetto noi ci dobbiamo prendere solo il css e al massimo qualche immagine se abbiamo usato delle texture per gli sfondi. Ma per evitare confusioni io consiglio di copiarvi l'intera cartella delle immagini. Procedete dunque in questo modo: aprite la cartella CSS e poi la cartella col nome del tema che avete scelto (sarà custom-theme se avete personalizzato) quindi cercate il file che finisce con l'estensione .css (sarà jquery-ui-1.7.2.custom.css se avete personalizzato) e rinominatelo in jquery-ui.css e sovrascrivete il file css del modulo jtabs che trovate con questo percorso:

modules/mod_jtabs/jquery/jquery-ui.css

Quindi copiate la cartella images che trovate dentro il pacchetto che avete scaricato (che sarà di fianco al file css che avete appena rinominato e col quale avete sovrascritto il file css del modulo) e andate a sovrascrivere la cartella images del modulo che trovate in questo percorso:

modules/mod_jtabs/jquery/images

Adesso non ci resta altro che goderci il modulo che, se ci avete saputo fare, si integrerà davvero alla perfezione nel nostro sito.

Il modulo jtabs può essere duplicato e pubblicato in diverse pagine del sito. Ma solo due volte, con le due diverse impostazioni TABS e ACCORDION, nella medesima pagina.

Qui potete vedere una demo del modulo jtabs nei suoi diversi aspetti.

Tonicopi