Fw

Wordpress Creative Developer

Tutorial jQuery – Comparsa di Un Pannello con Effetto Slide

  • Tutorial Jquery
  • -

Continuano i tutorial jQuery, dove andiamo a vedere tecniche per migliorare la user experience degli utenti.

Oggi vediamo PageSlide, un plugin che ti permetterà di aprire con un effetto slide un secondo pannello nella pagina.

Slide Panel jQuery

In passato abbiamo già visto un effetto simile, solo che in quel caso il pannello compariva dall’alto, mentre con PageSlide potremo far comparire il pannello da destra o da sinistra.

Per ottenere questo effetto bastano pochi semplici passi, che vediamo insieme nel tutorial.

Passo 1. Richiamare gli script

Come al solito richiamiamo gli script necessari, jQuery e Page Slide, tra i tag head.

   

Passo 2. Codice HTML

Il contenuto del secondo pannello può essere preso da un div o da una seconda pagina html. Vediamo il codice per il primo caso.

Questo il codice per il link al pannello

<a> class="pannello" href="#modal">Link pannello</a>

Questo invece il codice per il div, che deve contenere un link per la chiusura del pannello.


Passo 3. Codice CSS

Per quanto riguarda il codice CSS, è importante non rendere visibile inizialmente il pannello.

#modal { display: none; }

Passo 4. Applichiamo lo script

Infine applichiamo lo script per far comparire il pannello da sinistra.

$(".pannello").pageslide({ direction: "left", modal: true });

Ti consiglio di leggere la documentazione completa del plugin e di scaricare la demo per vedere tutte le potenzialità.

6 Commenti

  1. […] jQuery – Comparsa di Un Pannello con Effetto Slide […]

  2. Manca qualche < nei tuoi esempi, non credi?

  3. Vorrei sapere se fosse possibile aprire la slide e poterla chidudere al verificarsi di un evento senza dover cliccare sulla stessa pagina per richiudere la slide.

    Mi interesserebbe poter aprire una pagina con effetto slide poter aggiornare dei dati nella pagina che appare in una form, aggiornare del dati in un db e in automatico chiudere la slide dopo la scrittura(senza dover cliccare nel pagina precedente per chiuderla)

    ho provato a lanciare javascript:$.pageslide.close() ma non funziona 🙁

  4. Ho provato in tutti i modi ma non funziona… quindi presumo che questo esempio sia volutamente errato e cmq tutti gli esempi riportati dall’autore stesso… basta scaricare l’esempio e aprire il file html base.html per capire quali siano le intenzioni dell’autore della libreria.

  5. ma se volessi aprire più pannelli ???
    ad esempio creare un menu .. e aprire pannelli diversi per ogni voce del menu.

    Grazie.

  6. Quando clicco sul link mi dice pagina non trovata….

Scrivi un commento

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