Crea un widget Amazon Books con jQuery e XML

Ha senso rinunciare alle tabelle del database e al codice lato server quando è necessario memorizzare una quantità limitata di dati non sensibili. Accedere a questi dati può essere un gioco da ragazzi con jQuery perché la libreria è stata creata per attraversare facilmente i documenti XML. Con alcuni JavaScript personalizzati e magie jQuery puoi creare alcuni widget interessanti. Un buon modo per dimostrare questa funzionalità è creare un widget di libri Amazon.com sfogliabile.

Prefazione

Una cosa da ricordare mentre cerchi di provarlo da solo è che le impostazioni di sicurezza di Internet Explorer non ti consentono di effettuare chiamate XmlHttpRequest dal file system locale. Anche se non si utilizza un linguaggio lato server, è comunque necessario eseguire il codice sorgente da un server Web come il server HTTP di Apache. Anche il caricamento dei file su un account di hosting Web funzionerebbe.

Questo tutorial utilizza il file JavaScript core jQuery 1.2.6 minificato, che può essere scaricato qui da Google Code. Non sono necessari altri plugin Ecco uno screenshot del widget nella sua forma finale:

Passo 1: dissezionare l'interfaccia

Ho creato il seguente grafico con Illustrator, e questo è il framework per il widget di libri. Le immagini a fette finali possono essere facilmente sostituite per creare elementi di design adatti alle tue esigenze. L'illustrazione include i pulsanti successivo e precedente, nonché il contenitore per le immagini del libro. Il file ZIP di origine contiene un EPS stratificato se si desidera apportare modifiche senza dover ricominciare da capo.

Una cosa che volevo fare con questo widget era assicurarsi che fosse abbastanza flessibile per quasi tutte le dimensioni della colonna. Ciò significava che non solo aveva bisogno di essere una larghezza fluida, ma aveva anche bisogno di accettare unità di misura pixel. I libri possono essere avvolti con grazia su più righe distanziate uniformemente, fino a una singola colonna, o possono estendersi su una singola riga quanto più ti piace. Questa prossima schermata aiuta a visualizzare come ciò accadrà.

I blocchi solidi rosa chiaro servono a dimostrare la griglia di taglio dell'immagine. Ci sono i due pulsanti, così come i quattro angoli, lo sfondo superiore e inferiore, e poi lo sfondo sinistro e destro. Le linee continue rosa scuro servono a dimostrare i blocchi di contenimento, che alla fine finiranno con un paio di div e una lista non ordinata. Per consentire un layout fluido, un div interno conterrà lo sfondo del lato sinistro, e l'elenco non ordinato sarà annidato all'interno di questo div padre, che conterrà lo sfondo del lato destro.

Passaggio 2: l'HTML

Prima di arrivare all'HTML, vale la pena notare che non sto usando file PNG. Si potrebbero benissimo sostituire i PNG per le GIF e ciò non influirebbe sulla funzionalità. Ciò significherebbe, tuttavia, sarebbe necessario implementare una correzione per la mancanza del supporto della trasparenza PNG in Internet Explorer. Esistono diversi plugin jQuery disponibili.

Non c'è niente di innovativo nell'HTML, ma vorrei sottolineare alcune cose. Il primo riguarda la classe "overclear" che appare su diversi elementi. Questo è un metodo eccellente per svuotare i float senza bisogno di ulteriori markup. Discuto questa tecnica in un post sul blog intitolato Sei consigli e trucchi indispensabili per CSS che uso su ogni progetto. Dichiarando una larghezza e impostando la proprietà di overflow su hidden div, gli elementi figlio flottati non avranno più bisogno di un elemento finale con la proprietà clear.

La seconda cosa che vorrei sottolineare è la voce dell'elenco di caricatori. Dal momento che ho intenzione di prendere tutti i libri nel file XML in una volta, il caricatore dovrebbe apparire immediatamente. Ho generato un caricatore da Ajaxload e poi lo ho centrato come sfondo. Al termine del caricamento dell'XML, rimuovo l'elemento dell'elenco dal DOM e il caricatore scompare. Ecco uno screenshot di ciò che sembra con solo HTML e CSS applicati.

Il widget ha una larghezza fissa e per questo tutorial sarà una singola riga con quattro libri visualizzati ad ogni vista. Se non è stata applicata alcuna larghezza, verrà estesa all'intera lunghezza della pagina o alla larghezza del contenitore principale.

Passaggio 3: il CSS

Il CSS è abbastanza semplice e autoesplicativo, quindi non trascorrerò molto tempo a spiegare tutti gli aspetti di ciascun selettore. Quasi tutti i selettori sono elementi figlio del contenitore padre con l'identificatore "libri". Puoi vedere che la larghezza applicata è facoltativa. La sua rimozione consentirà al widget di espandersi e contrarsi liberamente.

 / * foundation * / body font: 100% normal "Arial", "Helvetica", sans-serif;  #books width: 515px; / * opzionale * / #books img border: 0;  #books .clear_both clear: both;  #books .float_left, #books ul li float: left; display: inline;  #books .float_right float: right;  #books .overclear width: 100%; overflow: nascosto;  / * styles * / #books .buttons position: relative; altezza: 30 px; margine: 0 0 5px 0;  #books .prev position: absolute; inizio: 0; a sinistra: 0; visibilità: nascosta;  #books .next position: absolute; inizio: 0; a destra: 0;  #books .showing margin: 5px 60px 0 60px; allineamento del testo: centro; font-size: .8em;  #books .top background: url (... /images/books_top.gif) repeat-x;  #books .inner padding: 0 0 0 20px; margine: 0 0 -20px 0; background: url (... /images/books_left_mid.gif) repeat-y;  #books ul margin: 0; padding: 0; list-style-type: none; background: url (... /images/books_right_mid.gif) repeat-y in alto a destra;  #books ul li display: none; posizione: relativa; margine: 0; riempimento: 0 20px 20px 0; font-size: .8em; z-index: 1;  #books ul li.loader display: block; float: none; altezza: 115 px; margine: 0 0 20px -20px; background: url (... /images/books_loader.gif) centro senza ripetizione;  #books ul li a.info position: absolute; fondo: 20px; a destra: 20px;  #books ul li a.thumb display: block; border: 1px solid #ddd;  #books ul li a.thumb img display: block; margine: 0; imbottitura: 3px;  #books .btm background: url (... /images/books_btm.gif) repeat-x;  .books_tool_tip display: none; posizione: assoluta; inizio: 0; a sinistra: 0; larghezza: 350 px; z-index: 9999;  .books_tool_tip .books_pointer_left position: absolute; inizio: 0; a sinistra: 0; larghezza: 10px; altezza: 10px; background: url (... /images/books_pointer_left.gif);  .books_tool_tip .books_pointer_right position: absolute; inizio: 0; a destra: 0; larghezza: 10px; altezza: 10px; background: url (... /images/books_pointer_right.gif);  .books_tool_tip .inner border: 1px solid #ddd; imbottitura: 15px 15px 3px 15px; margine: 0 0 0 9 px; sfondo: #fff;  .books_tool_tip .inner_right margin: 0 9px 0 0;  .books_tool_tip .inner p font-size: .8em; margine: 0; riempimento: 0 0 12px 0; 

C'è un'eccezione, e questo è il suggerimento dello strumento informativo applicato a un libro quando si passa sopra l'icona delle informazioni. Ogni suggerimento contiene la classe "books_tool_tip" e sono elementi figlio del corpo della pagina. Questi sono posizionati con JavaScript in base alla posizione del mouse nel momento in cui un utente sposta il cursore sull'icona.

Le classi "books_pointer_left" e "books_pointer_right" gestiscono le frecce associate al suggerimento per i dettagli del libro. La punta dell'utensile cade a destra del cursore, ma se si trova all'esterno della finestra del browser visibile (chiamata viewport), si sposterà sul lato sinistro. Le classi vengono scambiate e la freccia si sposta anche sul lato opposto. Ciò consente di posizionare il widget nella colonna sinistra o nel layout della colonna destra.

Passaggio 4: XML

Non c'è nulla di rivoluzionario in questo XML. Come vedrai, ogni libro contiene un titolo, uno o più autori, un'immagine, un URL di Amazon, un totale di recensioni e una media delle recensioni. L'XML potrebbe essere normalizzato in un'area, e questo è il nodo "autore". A rigore, ci possono essere diversi autori e un autore può essere uno di due tipi, un autore o un editore. Tuttavia, l'ho mantenuto semplice per concentrarmi sulle funzionalità principali. Un bel po 'di compiti a casa sarebbe vedere come potresti ottimizzare meglio quel nodo e poi analizzarlo con successo con jQuery.

     Erich Gamma, Richard Helm, Ralph Johnson, John M. Vlissides      250 4.5     Andrew Hunt, David Thomas      131 4.5     Martin Fowler, Kent Beck, John Brant, William Opdyke      139 4.5     Martin Fowler      56 4.5     Elisabeth Freeman, Eric Freeman, Bert Bates, Kathy Sierra      252 4.5     Thomas Cormen, Charles Leiserson, Ronald Rivest, Clifford Stein      167 4.0     Frederick P. Brooks      128 4.5     Joshua Bloch      120 5.0     Jeffrey Friedl      125 4.5     Michael Sipser      52 4.5     Steve Krug      453 4.5     Edward R. Tufte      96 4.5     David Flanagan      278 4.5     Jenifer Tidwell      47 4.5     William Lidwell, Kritina Holden, Jill Butler      54 4.5     Peter Morville      46 4.0     John Battelle      99 4.5     W. Jason Gilmore      100 4.0   

Passaggio 5: JavaScript

Il JavaScript è sicuramente la parte più complicata del tutorial. Come meglio posso, di solito inizio script come questo, eliminando lo stato e il comportamento di un oggetto per avere un'idea della funzionalità. Questo particolare oggetto è chiamato semplicemente "LIBRI". Uso anche il cosiddetto Pattern Module, che è dettagliato da Eric Miraglia su Yahoo! Blog dell'interfaccia utente. Questo modello di progettazione ti dà la possibilità di creare metodi e proprietà privati. Ogni volta che si rilascia uno script in natura (come ora), questo modello aiuta a eliminare la possibilità di conflitti con altre funzioni e oggetti che altri sviluppatori potrebbero già utilizzare.

 var BOOKS = function () var _P = init: function (params) , params: null, data: null, loadXml: function () , first: 0, max: 0, count: 0, preloadBooks: function () , browseBooks: function (browse) , tooltip: show: function (e, $ o) , hide: function (e, $ o) , getMouseCoord: function (v, e) , getViewport: function () ; return init: function (params) _P.init (params); ;  ();

Tutti i miei membri privati ​​ho inserito all'interno di un oggetto chiamato "_P". Questo ha più a che fare con gli sforzi organizzativi che altro. Finché un membro non è nell'istruzione return di BOOKS, potrei benissimo averlo creato come variabile o funzione indipendente. Poiché ho bisogno di un modo per associare parametri pubblici (impostazioni) con membri privati, ho un metodo pubblico. Questo metodo di inizializzazione pubblico passerà le impostazioni a un metodo di inizializzazione privato, fungendo da intermediario. Riesaminerò queste impostazioni nel passaggio finale.

Ecco uno sguardo ora al JavaScript finale:

 var BOOKS = function () var _P = init: function (params) _P.params = params; _P.loadXml (); , params: null, data: null, loadXml: function () $ .ajax (type: "GET", url: _P.params.xmlPath, dataType: "xml", success: function (data) _P. data = data; _P.max = _P.params.perView; _P.count = $ ("book", data) .length; _P.preloadBooks (); _P.browseBooks ();); , first: 0, max: 0, count: 0, preloadBooks: function () $ ("ul", "#books") .empty (); $ ("book", _P.data) .each (function (i) var title = $ .trim ($ ("title", this) .text ()); var href = $ .trim ($ ("href ", this) .text ()); $ (" ul "," #books ") .append (["
 src ", this) .text ())," ", $ (" image ", this) .attr (" width ")," ", $ (" image ", this) .attr (" height ")," ", titolo" "/>
"] .join (" ")); $ (" body ") .append (["
", titolo", (di ", $ .trim ($ (" author ", this) .text ()),") ","
 average_rating ", this) .text ()),,". gif "/> (", $ .trim ($ ("recensioni> total", this) .text ()), ")", "