Come impaginare un sito web con jQuery e il plugin jPages

Creare un’impaginazione accattivante e user-friendly non è sempre facile: continui reload delle pagine molto spesso stancano l’utente ancora prima della terza pagina. Vediamo come rendere il nostro contenuto maggiormente fruibile attraverso il plugin jPages.

Panoramica

Cercare di “guidare” i visitatori sempre più a fondo nel nostro sito e/o progetto non è sempre un compito facile, anzi. Molto spesso se non si usano determinati accorgimenti l’utente non visita mai oltre la terza pagina. Grazie a plugin come questo che ti propongo oggi, e a molti altri, possiamo aumentare il tempo di permanenza sul nostro sito web.

Jpages  permette di rendere la paginazione più interattiva e curata per i vostri clienti e visitatori. Come funziona? bhè essenzialmente il plugin non è molto dissimile dai vari infinite scroller (con questo termine mi riferisco a tutti i loader automatici stile facebook, twitter etc) in quanto prende i nostri articoli e li dispone su più pagine in base ai parametri forniti nel codice js. Una volta catalogati per pagina il plugin crea la paginazione dentro un determinato div e carica dinamicamente senza reload i vari articoli. In questo caso specifico, jPages ci mette a disposizione anche una serie di strumenti per “abbellire” e personalizzare la navigazione come lazy load, animazioni specifiche e callback molto utili.

Guida all’uso del plugin jPages

Per prima cosa colleghiamo le librerie e il codice di stile necessario al buon funzionamento del plugin. Il codice è da inserire all’interno dell’head del vostro progetto.

<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

Una volta collegate le librerie essenziali andiamo a impostare la struttura HTML che dovrà tenere la seguente sintassi:

<!-- Paginazione -->
<div class="holder"></div>

<!-- Contenitore principale -->
<ul id="itemContainer">
<!-- elementi, post o altro-->
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>

Dentro il div.holder il plugin andrà a generare il codice HTML per la paginazione. Potete anche mettere due div.holder all’interno del vostro progetto per far apparire due paginazioni distinte (magari una all’inizio e una alla fine del documento). Un altro appunto importante riguardo l’HTML è che l’itemContainer non deve essere per forza un ul ma anche un div normale con al suo interno tag article, div o qualsiasi altro elemento di markup.  A questo punto ci basta dare vita al tutto inserendo questo codice nel DOM:

$(function(){

  $("div.holder").jPages({
    containerID : "itemContainer"
  });

});//DOM

Questa ovviamente è la configurazione essenziale per far funzionare la paginazione jQuery; per un uso normale vi consiglio di usare questa configurazione:

  $("div.holder").jPages({
        containerID  : "itemContainer",
        perPage      : 10,
        previous : "precedente",
        next : "successivo ",
    });
  • perPage indica il numero di elementi da inserire per pagina
  • prevous indica il label per il pulsante precedente
  • next indica il label per il pulsante successivo

Callback e tricks molto utili

Una delle feature  più fastidiose di jPages è che l’altezza del container viene calcolata e settata dal plugin per tutte le pagine della paginazione. Questo può essere un vantaggio, ma molto spesso, ad esempio, l’ultima pagina non contiene una quantità di articoli o prodotti sufficiente a riempire tutto il container. Questo provoca nell’ultima pagina della paginazione un fastidioso spazio bianco tra l’ultimo articolo e la paginazione. Per ovviare a questo inconveniente vi consiglio caldamente di usare il parametro minHeight:false per rendere il container con altezza automatica.

Oltre questo piccolo trick quando si cambia pagina vi consiglio di predisporre un “torna su” automatico dopo il caricamento dei nuovi articoli. In questo modo l’utente sarà subito pronto a cercare l’articolo o il prodotto che più gli interessa senza dover scrollare nuovamente verso l’alto. Per fare questo effetto jPages ci viene incontro con i callback. Ecco il mio, personale, codice customizzato:

//Paginazione
$("div.holder").jPages({
containerID : "container",
previous : "precedente",
next : "successivo ",
perPage : 10,
minHeight : false,
callback : function( pages,items ){
//Effetto scrolla su
$("html, body").animate({ scrollTop: 0 }, 600);
}//Callback
});

Conclusioni

[button link=”http://luis-almeida.github.io/jPages/” color=”blue” target=”blank” size=”large”]Sito ufficiale e download Jpages[/button]

Vantaggi: User Experience migliorata e personalizzabile – Effetti personalizzabili senza reload della pagina – Versatile ed estremamente semplice da implementare.

Svantaggi: Rispetto alla paginazione server-side PHP, nel caso di grandi portali essendo una paginazione client-side senza reload è bene tenere sotto controllo i tempi di caricamento.

Voi cosa usate per i vostri progetti? Preferite la cara vecchia paginazione PHP a rischio che non venga calcolata dai clienti o vi affidate a queste soluzioni client-side che possono rallentare un pò il sito ma che lo rendono maggiormente fruibile? A voi la parola!

  1. Ciao, innanzitutto…bei tutorial 🙂
    Avrei una domanda: nel caso volessi utilizzare questo script due volte nella stessa pagina…
    Di solito, negli altri script do una classe differente.
    Su questo, anche cambiando proprio le classi all’interno dello script, salvandolo con un altro nome e chiamandolo, non mi funziona
    (per esempio ho sostituito tutte le classi “header” con “headers”, e le classi “jpages” con “jpage”, e risalvato il file come jpaje.js…)
    Ma nulla, mi funziona solo uno dei due…

      1. Si si, ma toglie a tutte e due le tabelle il paginator… (l’ho utilizzato per delle tabelle).
        All’inizio ho tenuto la classe “holder” e cambiato solo l’id del tbody… ma niente.
        Poi ho provato a cambiare le classi dentro il file e, anche facendo così, niente :O

          1. Ho trovato il problema…mi va in conflitto con un’altro script richiamato nello stesso id…
            Risolto, grazie 😉

            Ciao!

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.

nuovi-web-design-creativi-da-cui-trarre-ispirazione
Up Next:

5 Nuovi Web Design creativi da cui trarre ispirazione

5 Nuovi Web Design creativi da cui trarre ispirazione