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.
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.
<p>Contenuto pannello</p> <p><a> href="javascript:$.pageslide.close()">Chiudi pannello</a></p>
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à.
13 dicembre 2011 at 17:41
Manca qualche < nei tuoi esempi, non credi?
16 dicembre 2011 at 13:18
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
30 dicembre 2011 at 00:13
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.
30 luglio 2012 at 18:14
ma se volessi aprire più pannelli ???
ad esempio creare un menu .. e aprire pannelli diversi per ogni voce del menu.
Grazie.