MoebiusMania
Tutorial, articoli e curiosità sul web e dintorni
Libri sfogliabili con Javascript!
Dopo il grande successo di 2 anni fa del tutorial sul libro sfogliabile con InDesign ecco qua un altro modo per creare dei libri sfogliabili nelle vostre pagine web, grazie al plugin jQuery Booklet scritto da Built by Will (a quanto pare al momento vuole rimanere semi-anonimo)!
In questo breve tutorial vi mostrerò (qui una demo) come utilizzare questo plugin e alcune, ma non tutte, delle sue funzionalità e particolarità. Quindi basta chiacchiere, andate a scaricare il plugin e via con il codice!
Software richiesto
Code editor di vostra fiducia, stando sull'open source recentemente ho "abbandonato" Aptana in favore di Komodo Edit, dategli un occhio non è male!Prerequisiti
Conoscenze basilari di jQuery, attenzione che Booklet dipende dai plugin Easing e jQuery UI!Argomenti trattati
Inclusione e utilizzo del plugin jQuery Booklet1. Inclusione del plugin e occhio alle dipendenze!
Dovremo copiare nella cartella del nostro progetto tutta la cartella presente nell'archivio zip scaricato dal sito del plugin che sono: vari Javascript, un Css e una cartella con alcune immagini. Oltre ad includere jQuery e il file del plugin, dovremo aggiungere altri 2 plugin che fanno da "base" per il nostro libro sfogliabile: jQuery UI e Easing. Visto che sono tutti plugin di jQuery le dipendenze dovranno stare dopo l'inclusione della libreria e prima del plugin Booklet, quindi (mantenendo la buona pratica di includere i file Javascript dopo il tag body) l'elenco delle nostre inclusioni sarà il seguente:<script type="text/javascript" src="booklet/jquery-1.5.min.js" ></script> <script type="text/javascript" src="booklet/jquery-ui-1.8.9.custom.min.js" ></script> <script type="text/javascript" src="booklet/jquery.easing.1.3.js" ></script> <script type="text/javascript" src="booklet/jquery.booklet.1.2.0.min.js" ></script> <script type="text/javascript" > // Qui il nostro codice </script>Ho optato per la versione minificata (.min) di Booklet per il minor peso, ma se vogliamo studiarci il codice al suo interno dovremo aprire la versione normale. L'ordine di jQuery UI e Easing è indifferente, l'importante è come ho detto prima che stiano dopo jQuery ma prima di Booklet. Infine c'è un tag Javascript dove scriveremo il codice per attivare il plugin, ricordo che se volete potete anche scrivere in un file esterno e importare anche quello, ma sempre alla fine in quanto sarà codice che dipende da Booklet, che a sua volta dipende da tutti gli altri... Non dimentichiamoci di includere anche il file .css di Booklet nella head del nostro documento!
<link href="booklet/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" >Lo so... è un po di roba, ma serve tutta a farci risparmiare tempo!
2. Anatomia del codice Html necessario
Come molti plugin evoluti di jQuery anche Booklet ha bisogno di una struttura Html definita per funzionare, quindi non possiamo strutturare i nostri contenuti liberamente ma dobbiamo seguire una piccola regola che è questa:<div id="mioLibro"> <div class="b-load"> <div><!-- pagina 1 --></div> <div><!-- pagina 2 --></div> <div><!-- pagina 3 --></div> </div> </div>Prima di tutto c'è un div contenitore che serve principalmente da identificatore del libro, quindi gli diamo semplicemente un ID a nostra scelta. Al suo interno un altro div con una classe "b-load", questo sarà l'elemento che farà compiere al plugin la sua magia, quindi è importante che ci sia e che abbia esattamente questa classe assegnata! Infine all'interno di questo "b-load" ogni div inserito (con o senza id e classi, dipende cosa dovete fare voi) rappresenterà una pagina, in questo esempio di codice li ho lasciati vuoti, idealmente dovrebbero esserci all'interno di ognuno i vari contenuti: titoli, paragrafi, immagini, ec...
3. Diamo vita al libro!
A questo punto, dopo un setup non proprio brevissimo, siamo pronti a far partire il tutto, spostiamoci all'interno dell'ultimo tag script (o del vostro file esterno) e scriviamo questa semplice riga di codice:$("#mioLibro").booklet();
Questa direi che è stata facile, abbiamo solo selezionato il div principale tramite id con jQuery e abbiamo usato la funzione .booklet() per avviare il tutto. Volete customizzare un po il libro? Mano ai Css e alle opzioni del plugin!
4. Qualche opzione...
Sul sito trovate anche le opzioni del plugin per regolare alcune funzionalità come altezza, larghezza, velocità delle animazioni, aggiunta di tabs o frecce per una navigazione alternativa, alcuni esempi:$("#mioLibro").booklet({
width: 600, // setto la larghezza
arrows: true, // attivo le frecce di navigazione
pagePadding: 20, // imposto un padding per le pagine
speeed: 1500, // durata delle transizioni di pagina
});
Volendo potreste creare dei vostri pulsanti e tramite queste funzioni gestire la navigazione del libro:
$("#mioLibro").booklet("prev"); // pagina precedente
$("#mioLibro").booklet("next"); // pagina succcessiva
$("#mioLibro").booklet(4); // pagina 5
Attenzione che l'ultimo comando parte da 0, quindi "4" è riferito alla quinta pagina!