Creare delle semplici tab animate con JQuery

Oggi vediamo come creare delle potenti e bellissime tab animate con jQuery usando solo poche righe di codice!

VISUALIZZA UNA DEMO (vedi la sezione listino e novità della home del sito) >> 

01. La struttura html

 <h2>TITOLO PRIMA TAB</h2>

       <div>

         <a href="listino-prezzi.php" title="listino prezzi">Listino</a>

       </div>

 <h2>TITOLO SECONDA TAB</h2>

     <div>

     <img src="images/tua_img.jpg"  class="thumb-margin" alt="thumb1" />

     <p>Testo nascosto div #2</p>

     </div>

Come vedete la struttura è molto semplice: in questo primo esempio il “listino” e relativo div sottostante, di base resteranno aperti, mentre le novità resteranno chiude fino all’apertura da parte dell’utente. Ovviamente lo stile è personalizzabile secondo le vostre esigenze.

02. Animiamo il tutto con jQuery

Ovviamente ricordatevi sempre di includere le librerie jQuery dentro l’head del vostro sito prima di iniziare. Fatto ciò ecco lo script (commentanto) per realizzare le tabs:

//GESTIONE TABS
	$("#div-contenitore > div").hide(); //chiudo tutti i div
	$("#div-contenitore > div:first").show(); //mostro solo il primo (listino)

	$("#div-contenitore h2").click( //al click su un titolo delle tab
            function(){
            $(this).next().animate({'height': 'toggle'}, 'slow', 'easeOutBounce'); //prendi il successivo elemento del dom e fallo apparire agendo sull'altezza del div
            });

Lo script va inserito DOPO l’apertura del DOM, se non sai di cosa sto parlando consulta la guida introduttiva a jQuery.

Come vedete ho introdotto anche l’effetto easing easeOutBounce, per un corretto funzionamento dovete includere anche le librerie di easing nel vostro head del sito.

Scarica le librerie easing >>

Il funzionamento è molto semplice, grazie a next() si recupera il valore successivo presente nel DOM a quello selezionato. Usando uno scheletro come quello espresso nel capitolo 1 questa funzione ci torna molto utile: non a caso ho inserito i div contenenti la parte “nascosta” subito dopo il titolo h2, proprio per poter usare al meglio questa funzione. Con animate, ho agito poi sull’elemento height : toggle che permette di far crescere/azzerare l’altezza del nostro div.

Per ultimo i valori “slow” e “easeOutBounce” ci permettono rispettivamente di impostare il tempo dell’animazione e l’easing della stessa. E’ essenziale includere oltre alle librerie jQuery anche le librerie di easing, altrimenti lo script non funzionerà (o meglio funzionerà levando il valore “easeOutBounce”).

Ovviamente è possibile lasciare tutti i div chiusi , per far ciò basta eliminare questa riga di codice:

$("#div-contenitore > div:first").show(); //mostro solo il primo (listino)

Come vedete le tab si dimostrano semplici, veloci e pronte all’uso con pochissime righe di codice. Oltre a questo l’estrema personalizzazione possibile rende queste semplici tab davvero adatte a tutte le esigenze.

 03. Download

 SCARICA LO SCRIPT  >>

04. [UPDATE]  Una valida alternativa

Con l’avvento delle nuove librerie jQuery 1.7.x (e successive) in alcuni casi ho riscontrato alcuni errori nell’uso della versione precedente. Se anche voi avete problemi su IE8 provate a sostituire:

 $(this).next().animate({'height': 'toggle'}, 'slow', 'easeOutBounce');

con:

 $(this).next().slideToggle();

Se scarichi o usi i miei script condividi questo articolo su Facebook, Twitter o Google+!