Pubblicato da: fedeweb | luglio 4, 2008

Creare uno slide panel con jquery

Ultimamente ho avuto l’esigenza di creare un pannello che compariva a comparsa, come in questo esempio.

Per ottenere questo effetto ho utilizzato jquery, una libreria javascript che consente di manipolare facilmente il codice HTML, creare animazioni ecc,, ma principalmente permette di velocizzare la scrittura del codice javascript.

Per realizzare questo effetto, dovete:

  1. Scaricare il file jquery.js;
  2. Inserire tra i tag head il codice necessario per installare lo script:
  3. <script type=”text/javascript” src=”jquery.js”></script>

  4. Sempre tra i tag head, aggiungere questo codice, che potete anche mettere in file esterno che chiamate come visto in precedenza per jquery.

<script type=”text/javascript”>

$(document).ready(function(){

$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});

});
</script>

Dove #panel è l’id del div che dovrà comparire con l’effetto slide, e .btn_slide la classe associata al pulsante che attiva il div #panel.

<div id=”panel”>
Qui ci puoi mettere quello che vuoi…
</div>
<p class=”slide”><a href=”#” class=”btn-slide”>Slide Panel</a></p>

Spero possa servirvi per i vostri progetti!!! 😉

Scarica il sorgente

Guarda l’esempio

Annunci

Responses

  1. Complimenti fede, vedo che ti informi praticamente sempre su tutto. Sicuramente a qualcuno potra’ servire. Mitico

  2. 😉 Grazie grazie

  3. Ottima segnalazione. Questi framework JavaScript sono eccezionali.

    Ultimamente mi sono “innamorato” di EXT JS, eccellente in coppia con Adobe Air.

  4. […] all’utente di cambiare lo sfondo del sito Qualche giorno fa vi ho parlato dello slide panel, ovvero un div che compare a seconda dell’azione […]

  5. […] come creare un effetto hover animato, sfruttando jquery, di cui è stata già vista un’applicazione qualche settimana fa. Ecco un esempio di quello che andremo a […]

  6. Ciao!
    Ho provato a seguire la guida che hai fatto, ma purtroppo non riesco a farla funzionare!

    Il contenuto del div lo vedo dall’inizio (e non con lo scorrimento del pannello); mentre se clicco nel punto che dovrebbe attivare lo scorrimento, mi apre una finestra dove mi dice che l’indirizzo è irragiungibile.

    Eppure ho fatto tutto esattamente come da guida!

    Puoi darmi una mano?

    Grazie!

  7. Perdonami, mi mancava una virgoletta, ora funziona tutto!
    Grazie mille per l’ottima guida! 🙂

  8. Bene ottimo!! il 99% delle volte sono delle virgolette, o dei punti e virgola a non far funzionare le cose..

  9. Scusate ma qualcuno di voi sa come potrei fare quella cosa dello slide panel ma a partire da destra e farlo aprire verso sinistra invece che su e giù?

    Grazie

  10. Ottimo veramente… molto utile

  11. Grazie! e complimenti per il design del tuo blog..mi piace molto!


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: