Creare delle semplici tab animate con JQuery

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+!

  1. Ciao riccardo tu puoi aiutarmi, sto realizzando un sito privato.Ho fatto un menu con vari div che compongono le varie sezioni del menu, ho usato una solo pagina per farlo in modo dinamico sovrapponendo le varie div nella pagina in modo perfetto.Quello che non riesco a risolvere è un altra cosa.Voglio realizzare un effetto toggle jquery che cliccando sul pulsante faccia un effetto fade out animato per andare sul div nascost con un effetto fade in sul div nascosto.Poi vorrei fare lo stesso di nuovo dal div nascosto (diventaot visibile) per toranre al div di aprtenza sempre con effetto animazione toggle.Spero che hai capito di cosa volgio fare, aiutami ti prego non sono portato molto con jquery.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Site inspiration per residence: Eufelia

Site inspiration per residence: Eufelia