Creați un widget Amazon Books cu jQuery și XML

Este logic să renunți la tabelele bazei de date și la codul de pe server atunci când trebuie să stocați o cantitate limitată de date nesensibile. Accesul la aceste date poate fi un snap cu jQuery deoarece biblioteca a fost construită pentru a traversa documentele XML cu ușurință. Cu unele personalizate JavaScript și jQuery magie puteți crea unele widget-uri interesante. O modalitate buna de a demonstra aceasta functionalitate este prin construirea unui widget pentru carti Amazon.com browsable.

Prefaţă

Un lucru pe care trebuie să-l amintiți în timp ce încercați să încercați acest lucru pe cont propriu este că setările de securitate Internet Explorer nu vă permit să efectuați apeluri XmlHttpRequest de la sistemul de fișiere local. Chiar dacă nu utilizați o limbă de pe server, este necesar să rulați codul sursă de la un server Web ca serverul HTTP al Apache. Încărcarea fișierelor într-un cont de gazduire Web ar funcționa la fel de bine.

Acest tutorial folosește fișierul Javascript jQuery minimalizat 1.2.6, care poate fi descărcat aici de la Google Code. Nu sunt necesare alte pluginuri. Iată o captură de ecran a widget-ului în forma sa finală:

Pasul 1: Disecarea interfeței

Am creat următoarea grafică cu Illustrator și acesta este cadrul pentru widgetul cărților. Imaginile finale feliate pot fi înlocuite cu ușurință pentru a crea elemente de design care se potrivesc nevoilor dvs. Ilustrația include butoanele următoare și anterioare, precum și recipientul pentru imaginile cărților. Fișierul sursă ZIP conține un EPS stratificat dacă doriți să faceți modificări fără a trebui să începeți de la zero.

Un lucru pe care am vrut să-l fac cu acest widget a fost să mă asigur că era suficient de flexibil pentru aproape orice dimensiune a coloanei. Asta însemna că nu numai că trebuie să fie o lățime fluidă, dar a trebuit să accepte și unități de măsură de pixeli. Cărțile se pot înfășura cu grație la mai multe rânduri distanțate în mod egal, în jos până la o singură coloană sau pot să se întindă într-un singur rând cât mai larg posibil. Această captură de ecran următoare vă ajută să vizualizați cum se va întâmpla acest lucru.

Blocurile solide de culoare roz deschis trebuie să demonstreze grila de tăiere a imaginilor. Există cele două butoane, precum și cele patru colțuri, fundalul superior și cel inferior, apoi fundalul din stânga și din dreapta. Liniile pline de culoare închisă de culoare închisă trebuie să demonstreze blocurile de izolare, care vor ajunge în cele din urmă ca câteva divuri și o listă neordonată. Pentru a permite o structură fluidă, un div interior va conține fundalul din stânga, iar lista neordonată va fi imbricată în cadrul divului divizor, care va conține fundalul din partea dreaptă.

Pasul 2: HTML-ul

Înainte de a ajunge la codul HTML, merită să rețineți că nu folosesc fișiere PNG. S-ar putea foarte bine să înlocuiți PNG-urile pentru GIF-uri și nu ar afecta funcționalitatea. Ar însemna totuși că va trebui să implementați o soluție pentru lipsa suportului de transparență PNG în Internet Explorer. Există mai multe pluginuri jQuery disponibile.

Nu este nimic incontestabil despre HTML, dar aș dori să subliniez câteva lucruri. Primul este în ceea ce privește clasa "suprasolicitată" care apare pe mai multe elemente. Aceasta este o metodă excelentă pentru curățarea flotorilor fără a fi nevoie de marcare suplimentară. Am discutat această tehnică într-un post pe blog intitulat Șase sfaturi și trucuri CSS indispensabile pe care le folosesc în fiecare proiect. Prin declararea unei lățimi și prin setarea proprietății de depășire la ascunsă pe div divin, elementele copilului care sunt flotate nu vor mai avea nevoie de un element cu traiectorie cu proprietatea clară.

Al doilea lucru pe care aș dori să-l subliniez este elementul din lista de încărcătoare. Din moment ce voi lua toate cărțile din fișierul XML dintr-o dată, încărcătorul ar trebui să apară imediat. Am generat un încărcător de la Ajaxload și apoi l-am centrat pe fundal. Când se termină încărcarea XML, elimină articolul din listă din DOM și încărcătorul dispare. Iată o captură de ecran a ceea ce pare a fi doar cu HTML și CSS aplicate.

Widget-ul are o lățime fixă ​​și pentru acest tutorial va fi un singur rând cu patru cărți afișate la fiecare vizionare. Dacă nu s-a aplicat nici o lățime, atunci ar fi cuprins întreaga lungime a paginii sau lățimea containerului părinte.

Pasul 3: CSS

CSS este destul de simplă și auto-explicativă, așa că nu voi petrece prea mult timp explicând toate aspectele fiecărui selector. Aproape toți selectorii sunt elemente copil ale containerului părinte cu identificatorul "cărți". Puteți vedea că lățimea aplicată este opțională. Îndepărtarea acestuia va permite widgetului să se extindă și să contracteze liber.

 / * fundație * / corp font: 100% normal "Arial", "Helvetica", sans-serif;  #books width: 515px; / * opțional * / #books img frontieră: 0;  #books .clear_both clar: ambele;  #books .float_left, #books ul li float: stânga; afișare: inline;  #books .float_right float: right;  #books .overclear (lățime: 100%; overflow: ascuns;  / * stiluri * / #books. butoane position: relative; înălțime: 30px; margine: 0 0 5px 0;  #books .prev poziție: absolută; top: 0; stânga: 0; vizibilitate: ascuns;  #books .next position: absolute; top: 0; dreapta: 0;  #books. afișarea margin: 5px 60px 0 60px; text-align: centru; font-size: .8em;  #books .top fundal: url (... /images/books_top.gif) repeat-x;  #books .inner padding: 0 0 0 20px; marcă: 0 0 -20px 0; fundal: adresa URL (... /images/books_left_mid.gif) repeat-y;  #books ul margine: 0; umplutura: 0; listă-tip: none; background: url (... /images/books_right_mid.gif) repetați-i sus;  #books ul li afișare: niciunul; poziție: relativă; marja: 0; umplutura: 0 20px 20px 0; font-size: .8em; z-index: 1;  #books ul li.loader afișare: bloc; float: nici unul; înălțime: 115px; margine: 0 0 20px -20px; background: url (... /images/books_loader.gif) centrul de repetare a centrului;  #books ul li a.info poziție: absolută; fund: 20px; dreapta: 20px;  #books ul li a.thumb afișare: bloc; frontieră: 1px solid #ddd;  #books ul li a.thumb img afișare: bloc; marja: 0; padding: 3px;  #books .btm background: url (... /images/books_btm.gif) repetați-x;  .books_tool_tip display: none; poziția: absolută; top: 0; stânga: 0; lățime: 350px; z-index: 9999;  .books_tool_tip .books_pointer_left poziție: absolută; top: 0; stânga: 0; lățime: 10px; înălțime: 10px; fundal: url (... /images/books_pointer_left.gif);  .books_tool_tip .books_pointer_right poziție: absolută; top: 0; dreapta: 0; lățime: 10px; înălțime: 10px; fundal: url (... /images/books_pointer_right.gif);  .books_tool_tip .inner border: 1px solid #ddd; umflarea: 15px 15px 3px 15px; margine: 0 0 0 9px; fundal: #fff;  .books_tool_tip .inner_right margine: 0 9px 0 0;  .books_tool_tip .inner p font-size: .8em; marja: 0; umplutura: 0 0 12px 0; 

Există o singură excepție, și anume vârful de instrument informativ aplicat unei cărți atunci când treceți peste pictograma de informații. Fiecare sfat de sculă conține clasa "books_tool_tip" și sunt elemente copil ale corpului paginii. Acestea sunt poziționate cu JavaScript în funcție de poziția mouse-ului în momentul în care un utilizator mișcă cursorul pe pictogramă.

Clasele "books_pointer_left" și "books_pointer_right" gestionează săgețile asociate cu sfatul instrumentului detaliat al cărților. Sfatul instrumentului se află în partea dreaptă a cursorului, dar dacă se află în afara ferestrei browserului care se poate vedea (numit portul de vizualizare), acesta se va deplasa spre partea stângă. Clasele sunt schimbate, iar săgeata se îndreaptă spre partea opusă. Aceasta vă permite să plasați widget-ul într-o coloană din stânga sau în partea dreaptă a coloanei.

Pasul 4: XML-ul

Nu există nimic revoluționar în legătură cu acest XML. După cum veți vedea, fiecare carte conține un titlu, autor (i), o imagine, un URL Amazon, un total de recenzii și o medie a recenziilor. XML-ul ar putea fi normalizat într-o zonă și acesta este nodul "autor". Strict vorbind, pot exista mai mulți autori, iar un autor poate fi unul dintre cele două tipuri, un autor sau un editor. Cu toate acestea, am ținut-o simplu pentru a vă concentra pe funcționalitatea de bază. O bună parte din temele de lucru ar fi să vezi cum ai putea optimiza mai bine acel nod și apoi să îl parsezi cu succes cu 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     Frederick P. Brooks      128 4.5     Joshua Bloch      120 5     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     John Battelle      99 4.5     W. Jason Gilmore      100 4   

Pasul 5: JavaScript

JavaScript este cu siguranță cea mai complicată parte a tutorialului. Cât de bine pot, încep, de obicei, astfel de scripturi, stingând starea și comportamentul unui obiect pentru a obține o senzație de funcționalitate. Acest obiect special este pur și simplu numit "CĂRȚI". De asemenea, folosesc ceea ce se numește Modulul de model, care este detaliat de Eric Miraglia pe Yahoo! User Interface Blog. Acest model de design vă oferă posibilitatea de a crea metode și proprietăți private. Ori de câte ori lansarea unui script în sălbăticie (ca acum), acest model ajută la eliminarea posibilității conflictelor cu alte funcții și obiecte pe care alți dezvoltatori le pot folosi deja.

 var BOOKS = functie () var _P = init: function (params) , paramuri: null, data: null, loadXml: function ()  (e, $ o) , ascunde: funcția (e, $ o) , getMouseCoord: funcția (v, e) , getViewport: funcție () ; retur init: funcția (params) _P.init (params); ;  ();

Toți membrii mei particulari am plasat în interiorul unui obiect numit "_P". Acest lucru are mai mult de a face cu eforturile organizatorice decât orice. Atâta timp cât un membru nu se află în declarația BOOKS return, aș fi putut foarte bine să o fi creat ca o variabilă sau o funcție independentă. Deoarece am nevoie de o modalitate de asociere a parametrilor publici (setări) cu membrii privați, am o metodă publică. Această metodă de inițializare publică va transmite setările de-a lungul unei metode de inițializare privată, acționând ca o interfață. Voi reveni la aceste setări în etapa finală.

Iată o privire acum la JavaScript finală:

 var BOOKS = funcția () var _P = init: funcția (params) _P.params = params; _P.loadXml (); , paramuri: null, date: null, loadXml: function () $ .ajax (type: "GET", url: _P.params.xmlPath, dataType: "xml", success: function (data) _P. date = date; _P.max = _P.params.perView; _P.count = $ ("carte", date) .length; _P.preloadBooks (); _P.browseBooks ();); , primul: 0, max: 0, numărul: 0, preloadBooks: funcția () $ ("ul", "#books") .empty (); $ ("carte", _P.data). fiecare (funcția (i) var titlu = $ .trim ($ (" "),. ()); $ (" ul "," #books ") .append ([
 src ", aceasta) .text ()," ", $ (" imagine ", aceasta) .attr (" lățime ")," " ", titlu," "/>
"] .join (" ")); $ (" corp ") .append ([
", titlu," (prin ", $ .trim ($ (" autor ", acest) .text ()),") ","
 ")," .gif "/> (", $ .trim ($ ("reviews> total", acest) .text