 | Uso di jQuery per creare una semplice interfaccia tab con immagini per etichette |
Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab. JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice, ma comunque funzionale e facilmente adattabile a molte esigenze.
Il risultato è questo: demo
Nel pacchetto
jQuery nav img tab.zip (75,9 KiB, 180 hits)
oltre allo script jQuery, troverete anche i file e la cartella:
- index.htm
- style.css
- scripts.js
- cartella images
Passo 1 – creazione delle immagini
Decidete quanti tab sono necessari al vostro progetto (nel mio caso 3). Se non siete bravi in grafica e design cercate su internet le immagini che concettualmente si avvicinano al contenuto di ogni tab.
Modificate le dimensioni tenendo conto dello spazio che volete utilizzare.
A questo punto duplicate la vostra immagine e modificatela con effetti a piacere. Una volta terminato, create una nuova immagine ed incollate sopra la figura modificata e sotto la figura originale. (vedi immagine)
Passo 2 – file HTML e CSS
Se aprite il file index.html troverete:
<ul id="tabMenu"> <li class="tabrss selected"></li> <!-- bottone di default--> <li class="tabpost"></li> <li class="tabcom"></li> </ul>
Nel file style.css, il div “tabMenu” è associato a:
li.tabcom {background:url(images/tabcom.png) no-repeat 0 -77px;} li.tabrss {background:url(images/tabrss.png) no-repeat 0 -77px;} li.tabpost {background:url(images/tabpost.png) no-repeat 0 -77px;} li.mouseover {background-position:0 0;} li.mouseout {background-position:0 -77px;} li.selected {background-position:0 0;}
Come potete notare di default l’immagine (di dimensioni 77px / 77px) parte da -77 px (quindi viene vusualizzata la sezione a colori), se si passa il cursore del mouse sopra (voce “li.mouseover” nel file style.css) parte da 0 px (quindi viene visualizzata la sezione in b/n), così come quando viene selezionata (voce “li.mouseover” nel file style.css). Quindi avremo, a secondo i casi, una situazione del genere:
Il contenuto delle tre tab (ma se ne possono aggiungere altre a piacere) andrà inserito nella seguente struttura contenuta nel file index.html:
<div class="boxBody"> <div id="posts" class="show"> <!-- pagina di default--> ......................</div> <div id="famous"> ...............</div> <div id="comments"> .................</div> </div>
Ovviamente bisogna lavorare di CSS per rendere il tutto più gradevole.
Passo 3 – file JS
Nel file script.js è contenuta la funzione per la gestione dei tab con l’effetto a finestra nel cambio tra un tab e l’altro.
//nasconde il tab precedente $('.boxBody div').slideUp("slow"); //visualizza il tab selezionato $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
In questo modo utilizziamo solo la libreria jQuery. Se voglamo altri effetti, come il fade alle immagini (invece della tecnica sopra illustrata) o altri effetti sul contenuto dei tab, ovviamente il file script.js sarà più complicato ed inoltre sarà necessario caricare i plugin di jQuery.
Enjoy it!
Feed Rss
[...] See more here: [Ajax - JQuery] Uso di jQuery per creare una semplice interfaccia tab con immagini per etichette [...]
Ciao,
grazie per l’utile segnalazione ma come faccio a richiamare lo script in un punto preciso del mio blog?
Vorrei inserirlo dove lo hai messo tu, carico tutti i file via FTP nella root del blog e poi che codice devo inserire nella sidebar per richiamare il tab?
Grazie!
Ciao Andrea, grazie per essere intervenuto.
Per integrare il pannello in WordPress l’operazione è abbastanza semplice.
Individua sul server la cartella del tuo tema e fai una copia di backup (non si sa mai). Essa conterrà anche una cartella di immagini. Copia in questa cartella le etichette del panello (il contenuto di “images” tanto per intenderci).
Fatto questo vai in “Aspetto” -> “Editor” e copia il CSS del pannello alla fine del CSS del tuo blog.
Quindi nel file “hearder.php” (l’intestazione del tuo blog) inserisci le righe seguenti all’interno dell’ “< head >“.
< script src="js/jquery.js" type="text/javascript" >
< script src="js/script.js" type="text/javascript" >
controllando la cartella che contienen i file “.js” (nel m io caso /js all’interno della cartella del tema).
A questo punto non resta che modificre il file della sidebar (solitamente “sidebar.php”), copiando la struttura “div” del pannello.
Questa è la parte più delicata della moifica perchè ovviamente quando integri devi tenere conto delle dimensioni della sidebar e l’ereditarietà degli stili, ma con un pò di pazienza aggiusti tutto.
Per semplicità, se usi firefox, ti segnalo un’ottima estensione “firebug” che ti permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript.
Spero di essere stato esaustivo, se ci sono problemi chiedi pure.
Considerata la tua domanda magari ci scrivo su un articolo più dettagliato!
Ciao e a presto.