Maak een Amazon Books Widget met jQuery en XML

Het is logisch om databasetabellen en server-side code af te wijzen wanneer u een beperkt aantal niet-gevoelige gegevens moet opslaan. Toegang tot deze gegevens kan een fluitje van een cent zijn met jQuery, omdat de bibliotheek is gebouwd om gemakkelijk XML-documenten te doorlopen. Met een aantal aangepaste JavaScript- en jQuery-magie kunt u enkele interessante widgets maken. Een goede manier om deze functionaliteit te demonstreren, is door een doorbladerbare Amazon.com-boekenwidget te bouwen.

Voorwoord

Een ding om te onthouden terwijl u dit zelf probeert, is dat u met de beveiligingsinstellingen van Internet Explorer geen XmlHttpRequest-oproepen kunt doen vanuit het lokale bestandssysteem. Hoewel u geen taal aan de serverzijde gebruikt, moet u de broncode nog steeds uitvoeren vanaf een webserver zoals Apache's HTTP-server. Het uploaden van de bestanden naar een webhostingaccount zou ook werken.

Deze tutorial gebruikt het geminificeerde jQuery 1.2.6-kern JavaScript-bestand, dat hier kan worden gedownload via Google Code. Er zijn geen andere plug-ins nodig. Hier is een screenshot van de widget in zijn definitieve vorm:

Stap 1: Ontleden van de interface

Ik heb de volgende afbeelding gemaakt met Illustrator en dit is het kader voor de boekenwidget. De uiteindelijke gesneden afbeeldingen kunnen eenvoudig worden vervangen om ontwerpelementen te maken die aan uw behoeften voldoen. De illustratie bevat de volgende en vorige knoppen, evenals de container voor de boekafbeeldingen. Het bron-ZIP-bestand bevat een gelaagde EPS als u bewerkingen wilt uitvoeren zonder helemaal opnieuw te hoeven beginnen.

Eén ding dat ik met deze widget wilde doen, was ervoor zorgen dat deze flexibel genoeg was voor zowat elke kolomgrootte. Dat betekende dat het niet alleen een vloeiende breedte moest zijn, maar ook pixeleenheid-eenheden moest accepteren. Boeken kunnen netjes worden ingepakt in meerdere rijen die gelijk uit elkaar staan, tot een enkele kolom, of kunnen overlopen in een enkele rij zo breed als u wilt. Deze volgende screenshot helpt om te visualiseren hoe dat zal gebeuren.

De lichtroze massieve blokken moeten het beeldsnijrooster demonstreren. Er zijn twee knoppen, evenals vier hoeken, de bovenste en onderste achtergrond en vervolgens de linker- en rechterachtergrond. De donkerroze volle lijnen moeten insluitingsblokken demonstreren, die uiteindelijk eindigen als een paar divs en een ongeordende lijst. Om een ​​vloeiende lay-out mogelijk te maken, bevat een innerlijke div de achtergrond aan de linkerkant en de ongeordende lijst wordt genest binnen deze parent-div, die de achtergrond aan de rechterkant bevat.

Stap 2: De HTML

Voordat ik de HTML-code bekijk, is het de moeite waard om op te merken dat ik geen PNG-bestanden gebruik. U kunt PNG's voor de GIF's heel goed vervangen, en dit heeft geen invloed op de functionaliteit. Het zou echter betekenen dat u een oplossing moet implementeren voor het ontbreken van PNG-transparantie-ondersteuning in Internet Explorer. Er zijn verschillende jQuery-plug-ins beschikbaar.

Er is niets grensverleggend aan de HTML, maar ik zou graag een paar dingen willen opmerken. De eerste is met betrekking tot de "overclear" -klasse die op verschillende elementen voorkomt. Dit is een uitstekende methode om drijvers te verwijderen zonder dat extra markeringen nodig zijn. Ik bespreek deze techniek in een blog met de titel Zes onmisbare CSS-tips en -trucs die ik gebruik voor elk project. Door een breedte te declareren en de overflow-eigenschap in te stellen op verborgen op een bovenliggende div, hebben onderliggende elementen die zweefden, geen volgend element meer nodig met de vrije eigenschap.

Het tweede ding dat ik zou willen wijzen is het laderlijstitem. Aangezien ik alle boeken in het XML-bestand in één keer zal pakken, zou de loader onmiddellijk moeten verschijnen. Ik heb een loader van Ajaxload gegenereerd en deze gecentreerd als achtergrond. Wanneer de XML klaar is met laden, verwijder ik het lijstitem van de DOM en verdwijnt de lader. Hier is een screenshot van hoe het eruit ziet met alleen de toegepaste HTML en CSS.

De widget heeft een vaste breedte en voor deze zelfstudie is het een enkele rij met vier boeken weergegeven in elke weergave. Als er geen breedte werd toegepast, zou deze de volledige lengte van de pagina beslaan, of de breedte van de bovenliggende container.

Stap 3: De CSS

De CSS is redelijk rechtlijnig en spreekt voor zich, dus ik zal niet veel tijd besteden aan het uitleggen van alle facetten van elke selector. Vrijwel alle selectors zijn onderliggende elementen van de bovenliggende container met de identifier "books". U kunt zien dat de toegepaste breedte optioneel is. Als je het verwijdert, kan de widget vrijuit uitbreiden en inkrimpen.

 / * foundation * / body font: 100% normal "Arial", "Helvetica", sans-serif;  #books width: 515px; / * optioneel * / #books img border: 0;  #books .clear_both duidelijk: beide;  #books .float_left, #books ul li float: left; weergave: inline;  #books .float_right float: right;  #books .overclear width: 100%; overloop verborgen;  / * styles * / #books .knopen position: relative; hoogte: 30 px; marge: 0 0 5px 0;  #books .prev position: absolute; boven: 0; links: 0; zichtbaarheid: verborgen;  #books .next positie: absoluut; boven: 0; rechts: 0;  #boeken. tonen margin: 5px 60px 0 60px; text-align: center; lettertypegrootte: .8em;  #books .top repeat: herhaalde x;  #books .inner opvulling: 0 0 0 20px; marge: 0 0 - 20 px 0; achtergrond: url (... /images/books_left_mid.gif) repeat-y;  #books ul margin: 0; opvulling: 0; list-style-type: none; achtergrond: url (... /images/books_right_mid.gif) repeat-y rechtsboven;  #books ul li display: none; positie: relatief; marge: 0; opvulling: 0 20px 20px 0; lettertypegrootte: .8em; z-index: 1;  #books ul li.loader display: block; zweven: geen; hoogte: 115 px; marge: 0 0 20px -20px; achtergrond: url (... /images/books_loader.gif) no-repeat center center;  #books ul li a.info position: absolute; onder: 20px; rechts: 20px;  #books ul li a.thumb display: block; border: 1px solid #ddd;  #books ul li a.thumb img display: block; marge: 0; opvulling: 3px;  #books .btm background: url (... /images/books_btm.gif) repeat-x;  .books_tool_tip display: none; positie: absoluut; boven: 0; links: 0; breedte: 350 px; z-index: 9999;  .books_tool_tip. books_pointer_left position: absolute; boven: 0; links: 0; breedte: 10px; hoogte: 10 px; achtergrond: url (... /images/books_pointer_left.gif);  .books_tool_tip. books_pointer_right position: absolute; boven: 0; rechts: 0; breedte: 10px; hoogte: 10 px; achtergrond: url (... /images/books_pointer_right.gif);  .books_tool_tip .inner border: 1px solid #ddd; opvulling: 15px 15px 3px 15px; marge: 0 0 0 9px; achtergrond: #fff;  .books_tool_tip .inner_right margin: 0 9px 0 0;  .books_tool_tip .inner p font-size: .8em; marge: 0; opvulling: 0 0 12px 0; 

Er is één uitzondering, en dat is de informatietool die op een boek wordt toegepast wanneer u het informatiepictogram omdraait. Elke tooltip bevat de klasse "books_tool_tip" en zijn onderliggende elementen van de paginolichaam. Deze worden met JavaScript gepositioneerd op basis van de muispositie op het moment dat een gebruiker de cursor op het pictogram plaatst.

De klassen "books_pointer_left" en "books_pointer_right" beheren de pijlen die zijn gekoppeld aan de tooltip met boekdetails. De tooltip valt rechts van de cursor, maar als deze zich buiten het zichtbare browservenster bevindt (de viewport genoemd), dan verschuift deze naar de linkerkant. De klassen worden verwisseld en de pijl verschuift ook naar de andere kant. Hiermee kunt u de widget in de lay-out van een linkerkolom of rechter kolom plaatsen.

Stap 4: De XML

Er is niets revolutionairs aan deze XML. Zoals je zult zien, bevat elk boek een titel, auteur (s), een afbeelding, een Amazon-URL, een totaal van recensies en gemiddelde beoordelingen. De XML kan in één gebied worden genormaliseerd en dat is het "auteur" -knooppunt. Strikt genomen kunnen er verschillende auteurs zijn en een auteur kan een van de twee typen zijn, een auteur of een editor. Ik heb het echter eenvoudig gehouden om me te concentreren op de kernfunctionaliteit. Een goed beetje huiswerk zou zijn om te zien hoe je dat knooppunt beter kunt optimaliseren en het vervolgens met succes kunt analyseren met 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   

Stap 5: JavaScript

JavaScript is zeker het meest gecompliceerde deel van de zelfstudie. Zo goed als ik kan, begin ik meestal met scripts door de toestand en het gedrag van een object uit te zetten om een ​​gevoel van functionaliteit te krijgen. Dit specifieke object wordt eenvoudig "BOEKEN" genoemd. Ik gebruik ook wat bekend staat als het modulepatroon, dat door Eric Miraglia wordt gedetailleerd op de Yahoo! Gebruikersinterfaceblog. Met dit ontwerppatroon kunt u privémethoden en -eigenschappen maken. Telkens wanneer een script in de natuur wordt vrijgegeven (zoals nu), helpt dit patroon om de mogelijkheid van conflicten met andere functies en objecten die andere ontwikkelaars al gebruiken te elimineren..

 var BOOKS = function () var _P = init: function (params) , params: null, data: null, loadXml: function () , first: 0, max: 0, count: 0, preloadBooks: functie () , bladerenBoeken: functie (bladeren) , tooltip: tonen: functie (e, $ o) , verbergen: functie (e, $ o) , getMouseCoord: functie (v, e) , getViewport: function () ; return init: function (params) _P.init (params); ;  ();

Al mijn privé-leden heb ik in een object met de naam "_P" geplaatst. Dit heeft meer te maken met organisatorische inspanningen dan wat dan ook. Zolang een lid niet in de retourinstructie van BOEKEN staat, zou ik het heel goed als een zelfstandige variabele of functie hebben kunnen maken. Omdat ik een manier nodig heb om openbare parameters (instellingen) te koppelen aan privé-leden, heb ik één openbare methode. Deze openbare initialisatiemethode geeft de instellingen door aan een privé-initialisatiemethode, die als tussenpersoon fungeert. Ik zal die instellingen in de laatste stap opnieuw bekijken.

Hier is nu een blik op de uiteindelijke JavaScript:

 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 = $ ("boek", data) .length; _P.preloadBooks (); _P.browseBooks ();); , first: 0, max: 0, count: 0, preloadBooks: function () $ ("ul", "#books") .empty (); $ ("boek", _P.data). any (functie (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 ")," ", titel," "/>
"]. join (" ")); $ (" body ") .append (["
", titel," (door ", $ .trim ($ (" auteur ", dit) .text ()),") ","
 average_rating ", this) .text ()),,". gif "/> (", $ .trim ($ ("reviews> total", this) .text ()), ")", "