Share
Hva du skal skapeVi har vår lille app ute akkurat slik vi vil, men det gjør egentlig ikke noe enda. Så la oss jobbe med å legge til noen JavaScript for å gjøre appen interaktiv.
Denne delen av serien vil kreve noe konsentrasjon fra deg, men selv om du ikke er en erfaren JavaScript-utvikler, lover jeg at du vil gå bort etter å ha lært noen verdifulle ferdigheter.
Først skal vi opprette vår javascriptfil eiendeler / JS / main.js og inne i det vil vi lage et objekt som heter Gimmie (oppkalt etter vår app). Dette er hvor vi lagrer variablene og funksjonene vi trenger, slik at de ikke er på vindu gjenstand. Vi legger det rett ved siden av jQuerys "dokument klare" samtale som vi også skal bruke.
"javascript var Gimmie = $ innhold: $ ('innhold'), $ form: $ ('form'),;
$ (dokument) .ready (funksjon () // På siden last, utfør dette ...); "
Legg merke til at vi har lagt til noen variabler i vår Gimmie gjenstand: $ innhold, $ skjema. Dette er jQuery-objekter, så vi heter dem med en $ foran for å minne oss om det. Siden de er spesifikke DOM noder som vi vil referere mer enn en gang, vil vi lagre dem i variabler for raskere, fremtidig bruk.
Det første vi må håndtere, er når brukeren går inn i noe i skjemaet og sender det inn. Så, inne i vår "dokument klar" vil vi legge ved en lytterhendelse til vårt skjema. Vi kunne gjøre $ ( 'Form'). På () men fordi vi allerede har lagret formelementet i en variabel, refererer vi bare til det i stedet ved å gjøre det Gimmie. $ Form.on (). Da vil vi forhindre standard skjema handling (slik at siden ikke oppdateres):
javascript $ (dokument) .ready (function () Gimmie. $ form.on ('submit', funksjon (e) e.preventDefault (); // Gjør flere ting her ...););
Nå vil vi vise en "lasting" -status når en bruker sender skjemaet. På den måten vet de at noe skjer. Hvis du husker, utformet vi dette i Sketch:
For å oppnå dette, vil vi skape en funksjon inne i vår Gimmie objekt som heter toggleLoading og vi kan utføre det når brukeren sender inn et skjema ved å ringe Gimmie.toggleLoading () inne i vår skjema innsending lytter. Vi heter det toggleLoading fordi vi vil bytte den nåværende lastetilstanden i brukergrensesnittet, dvs. vi utfører det en gang på innsending, så løper vi en haug med kode, og når vi er ferdige vil vi kjøre den igjen for å ta bort lastetilstanden.
"javascript var Gimmie = / * vår andre kode her * /
Accentsconagua
toggleLoading: function () // Veksle lastindikator dette. $ content.toggleClass ('content - loading'); // Bytt send-knappen slik at vi ikke får doble innleveringer // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery dette. $ Form.find ('button') .prop ('deaktivert', funksjon (i, v) return! v;); , $ (dokument) .ready (funksjon () Gimmie. $ form.on ('submit', funksjon (e) e.preventDefault (); Gimmie.toggleLoading (); // ring lastingsfunksjonen) ;); " Legg merke til at vi bytter en klasse på .innhold element kalt innhold - lasting. Vi må lage noen CSS-stiler rundt det. Så, i vår CSS-fil, la oss legge til:
"css .content-loading: før innhold:"; posisjon: absolutt; topp: 0; venstre: 0; bredde: 100%; høyde: 100%; bakgrunn: #fff; opasitet: .9; z-indeks: 10;
.innholdsinnlasting: etter innhold: url ('... /img/loading.gif'); posisjon: absolutt; venstre: 50%; topp: 3em; margin-venstre: -16px; margin-topp: -16px; z-indeks: 11; "
Her bruker vi pseudoelementer til å lage en lastetilstand på vårt innholdsområde. Våre før Elementet brukes til å lage et litt ugjennomsiktig hvitt overlegg på innholdsområdet. Så bruker vi etter element for å vise et animert lastegift inne i boksen vår. Når denne klassen er lagt til i innholdsdelen, vil det se ut som om noe lastes inn.
På dette tidspunktet, hvis du skriver inn noe i inntastingsfeltet og sender skjemaet, vises en lastetilstand, og du vil bare bli sittende fast ved det.
Før vi sender inn en forespørsel til iTunes API, må vi sørge for at dataene som er oppgitt av brukeren er riktige.
Så hva utgjør nøyaktig riktig data? Vel, hvis vi ser på iTunes API-dokumentasjonen, er det noen forskjellige måter å få innhold på. En måte er å gjøre et søk basert på nøkkelord. Men det vi skal gjøre i stedet, kalles en "oppslag". Fra dokumentene:
Du kan også opprette en oppsøkningsforespørsel for å søke etter innhold i butikkene basert på iTunes ID
Det gir deretter noen få eksempler, for eksempel å se på Yelp Software-programmet ved hjelp av iTunes-ID: https://itunes.apple.com/lookup?id=284910350. Legg merke til at søknadens ID-nummer er det som deles mellom disse nettadressene. Det er det vi trenger fra brukeren.
Fra et UX-perspektiv kan det være litt vanskelig å be om en identifikator til en app i appbutikken (spesielt for nybegynnere). Så i stedet for å instruere folk hvordan du får en apps ID, ber vi om appens butikklink. Alle vet hvordan å kopiere og lime inn linker! Applenkene er lett tilgjengelige for alle ved å bare kopiere dem fra den enkelte appens side i appbutikken (i iTunes, på nettet eller i Mac App Store).
Så, når brukeren kommer inn i en lenke, må vi validere den:
http: // itunes For å gjøre dette, vil vi opprette en valideringsfunksjon inne i vår Gimmie variabel og utfør den på skjemaet, send inn hendelseslytter.
"javascript var Gimmie = / * vår tidligere kode her * / userInput:", userInputIsValid: false, appId: ", validere: funksjon (input) // validering skjer her,
Gimmie. $ Form.on ('send', funksjon (e) / * vår tidligere kode her / Gimmie.userInput = $ (dette) .find ('input') .val (); Gimmie.validate (); hvis (Gimmie.userInputIsValid) / gjør API-forespørsel / else / kaste en feil * /); "
Legg merke til hva vi gjør i koden ovenfor:
Gimmie userinput er en streng og er satt som inngang fra brukerenuserInputIsValid er en boolsk som vil være sann eller falsk avhengig av om innspillet fra brukeren er gyldig (vi skriver de testene i et øyeblikk)AppID er en streng med sifre som vil bli hentet fra userinput hvis det er gyldigvalidere er en funksjon der vi vil validere brukerens innspill når det kallesGimmie.userInput til verdien av skjemaets inntastingsfeltGimmie.validate () Gimmie.validate vil avgjøre) så vil vi fortsette og gjøre en iTunes API-forespørsel. Hvis det ikke er gyldig, vil vi vise en feil som informerer brukeren om at dataene de skrev inn ikke stemmer.La oss nå skrive koden som bekrefter hvorvidt brukerinngangen er riktig. Vær oppmerksom på at i vår HTML-kode setter vi inntastetypen til url . Dette betyr at noen nettlesere vil utføre noen type validering på den innspillingen, men det vil ikke være konsistent eller enhetlig på tvers av nettleserne. I noen nettlesere virker det ikke engang. Så hvis brukeren skriver "bla", vil nettleseren godta den og skjemaet vil sende inn. I andre nettlesere må de minst skrive inn noe som begynner med "http: //" før nettleseren lar dem sende skjemaet. Men det vi ønsker er en nettadresse som begynner med "http: // itunes", så vi vil håndtere det i JavaScript.
javascript var Gimmie = / * vår tidligere kode * / validere: funksjon () // Bruk regex for å teste om inngang er gyldig. Det er gyldig hvis: // 1. Det begynner med 'http: // itunes' // 2. Det har '/ id' etterfulgt av sifre i strengen et sted var regUrl = / ^ (http | https): \ / \ / itunes /; var regId = / \ / id (\ d +) / i; hvis (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (this.userInput); this.appId = id [1]; else this.userInputIsValid = false; this.appId = ";
Her bruker vi vanlige uttrykk for å teste om inngangen oppfyller våre forhold. La oss gå gjennom dette litt mer detaljert:
javascript var regUrl = / ^ (http | https): \ / \ / itunes / i; var regId = / \ / id (\ d +) / i;
Dette er de to regulære uttrykkstavlene vi definerer (les mer om regulære uttrykk). Her er en kort oppsummering av hva de vanlige uttrykkene gjør:
regUrl er regex bokstavelig for å bestemme hvorvidt brukerinngangen er en URL som begynner med "http: // itunes" / ^ sier "start regex og begynn å se på begynnelsen av strengen"(Http | https): sier "se etter" http "eller" https "etterfulgt av et semikolon ':'"\ / \ / sier "se etter" // "" (fordi et fremadstrekk er et spesialtegn i regulære uttrykk, som måten vi bruker det på begynnelsen av regexen, må vi bruke tilbakeslaget før spissen for å fortelle regex ikke å tolke fremoverstreket som et spesialtegn, men heller som bare et fremoverstreke)itunes / i sier "se etter" iTunes ", og avslutt regexet" mens " Jeg på slutten indikerer matchingen skal gjøres tilfelle ufølsom (siden noen kan lime inn 'HTTP: // ITUNES' som fortsatt er gyldig)
REGID er regex bokstavelig for å bestemme hvorvidt brukerinngangen har en ID av sifre som samsvarer med iTunes Store-linken URL-mønsteret. Alle gyldige iTunes Store-koblinger vil ha / id i det, etterfulgt av en sekvens av tall. / \ / Id sier "start regexen og se hvor som helst i strengen for '/ id'" (se forrige eksempel for fremoverstrekkslipende beskrivelse)(\ D +) sier "se etter en sekvens av tall (0 til 9) 1 eller flere ganger og fang dem". Parentesen indikerer at vi vil huske hvilken kamp som er definert inne, dvs. i vårt tilfelle husker vi sekvensen av sifre som representerer appens ID. De / d er et spesielt tegn i regex som indikerer at vi vil ha sifre [0-9] og + sier matcher de [0-9] 1 eller flere ganger./Jeg sier "avslutte regex" og Jeg Indikerer ikke-sannsynlig samsvar (siden en URL med / ID938491 er fortsatt gyldig)Neste kodenavn ser slik ut:
javascript hvis (regUrl.test (this.userInput) && regId.test (this.userInput)) this.userInputIsValid = true; var id = regId.exec (this.userInput); this.appId = id [1]; else this.userInputIsValid = false; this.appId = ";
De .test() Metoden på en regex bokstavelig ser etter en kamp fra en spesifisert streng og returnerer sann eller falsk, avhengig av om spesifisert kamp er funnet. Så, i vårt tilfelle, tester vi brukerens innspill mot begge deler regUrl og REGID for å sikre at inngangen begge begynner med "http: // itunes" og har "/ id" etterfulgt av et antall sifre.
Hvis begge testene returnerer sant, setter vi inn userInputIsValid flagg til ekte og så pakker vi ut ID-en fra nettadressen og setter den som AppID. For å gjøre dette kjører vi .exec () metode på inngangen. Dette vil returnere en rekke to elementer: en som matcher hele regexen, og en som passer bare strengen av tall etter / id (dette er fordi vi brukte parentesen i regexen (/ D +) å si "Husk hva som blir tatt med her"). Så, som et eksempel, .exec () Metoden ville returnere noe sånn ["/ id12345", "12345"] og vi vil bare ha det andre elementet i matrisen, så vi setter AppID til det.
Hvis begge tester returnerer falsk, setter vi inn userInputIsValid til falsk og AppID til en tom streng.
Nå er alt vi trenger for å avgjøre om brukerens inntasting er gyldig, på plass. Så vi kan fortsette med resten av skriptet vårt.
Akkurat nå er vi på et punkt nå i vårt skript hvor vi kan avgjøre hvorvidt brukerens innspill er det vi trenger. Så forlot vi med dette:
javascript hvis (Gimmie.userInputIsValid) / * gjør API-forespørsel * / annet / * kaste en feil * /
For nå skal vi håndtere delen "kaste en feil". Fordi det kommer til å være andre steder i utførelsen av vårt skript hvor feil kan oppstå, skal vi lage en generisk feilfunksjon som vil vise en feil til brukeren, avhengig av hva som gikk galt. Hvis du husker, utformet vi hva dette ville se ut i Sketch:
Legg merke til hvordan feilstatusen vår har i hovedsak to elementer: en "header" med fet skrift og en "kropp" som er vanlig sett tekst. Så vi vil opprette en generisk feilfunksjon som aksepterer disse. "Header" vil vanligvis angi feilen og "kroppen" vil beskrive hvordan fikse feilen. Så, i dette tilfellet, hvis innspillet fra brukeren er ugyldig, må vi informere dem om hva en riktig inntastetype er. Så la oss lage en generell funksjon som kan vise feil basert på teksten vi sender den til:
javascript hvis (Gimmie.userInputIsValid) / * gjør API-forespørsel * / else Gimmie.throwError ('Ugyldig lenke', 'Du må sende inn en standard iTunes Store-kobling med en ID, dvs..
https://itunes.apple.com/us/app/twitter/id333903271?mt = 8 ');
Her kaller vi funksjonen Gimmie.throwError () og pass det to parametere: "header" -teksten og "body" -teksten. Fordi vi bare viser HTML, kan vi sende HTML-elementer inn i parameterne hvis vi ønsker det. I dette tilfellet passerer vi i "body" i et eksempel på iTunes Store-linken, og vi markerer id / del med vektorkoden () for å indikere for brukeren, "hei, vi trenger en iTunes Store-kobling, og sørg for at den har en ID i den".
Vi kan sette vår CSS for å markere hva som er pakket inn koder, samt å gi feilen vår en farge:
css .content - error color: # 196E76; .content em font-style: normal; bakgrunnsfarge: lightyellow;
Nå skal vi lage throwError fungere i Gimmie gjenstand:
"javascript var Gimmie = / * tidligere kode her * / throwError: funksjon (header, tekst) this. $ content .html ('
'+ header +' '+ tekst +'
') .addClass (' content-error ');this.toggleLoading (); "
Legg merke til at vi griper dette. $ innhold. Dette er det samme som å gjøre $ ( 'Innhold') men vi lagret dette valget som en variabel i Gimmie objekt, siden vi vil bruke det mer enn en gang. Så vi refererer det ved å gjøre dette. $ innhold. Nå setter vi HTML-innholdet i $ innhold element til teksten vi passerte inn, med "header" -teksten som fet skrift. Så legger vi til en klasse av innhold - error til vårt innholdselement slik at vi kan stille feilene slik vi ønsker. Til slutt løper vi toggleLoading () funksjon av Gimmie for å fjerne lasteklassen og slutte å vise lastegiftet.
På dette tidspunktet, hvis du skriver inn en feil URL som http://google.com, eller hvis du skriver inn en riktig iTunes URl som ikke har en ID som https://itunes.apple.com/us/app/twitter/ Du bør se en feilmelding som vises:
For å forbedre vårt skjema litt, la oss legge til en fin liten "pop" -animasjon som kjører når det oppstår en feil (i støttede nettlesere). For å gjøre dette legger vi til / fjern en CSS-klasse som inneholder en animasjon. Så, i vår CSS-fil, la oss gjøre:
"css .content-error-pop -webkit-animasjon: pop .333s; -moz-animasjon: pop .333s; -o-animasjon: pop .333s; animasjon: pop .333s;
@ -webkit-keyframes pop 0% -webkit-transform: skala (1); 50% -webkit-transform: skala (1.075); 100% -webkit-transform: skala (1);
@ -moz-keyframes pop 0% -webkit-transform: skala (1); 50% -webkit-transform: skala (1.075); 100% -webkit-transform: skala (1);
@ -o-keyframes pop 0% -webkit-transform: skala (1); 50% -webkit-transform: skala (1.075); 100% -webkit-transform: skala (1);
@keyframes pop 0% -webkit-transform: skala (1); 50% -webkit-transform: skala (1.075); 100% -webkit-transform: skala (1); "
Det vil gjøre innholdsområdet skalere opp og ned i størrelse, noe som gjør det "pop" når det oppstår en feil. Nå må vi bare legge til / fjerne den klassen med JavaScript. Så tilbake i vår throwError funksjon:
"javascript throwError: function (header, text) // Fjern animasjonsklasse dette. $ content.removeClass ('content-error-pop');
// Trigger reflow // https://css-tricks.com/restart-css-animation/ dette. $ Innhold [0] .offsetWidth = dette. $ Innholdet [0] .offsetWidth; // Legg til klasser og innhold dette. $ Content .html (''+ header +' '+ tekst +'
') .addClass (' innhold - feil innhold - feil-pop '); this.toggleLoading (); ," Her fjerner vi klassen først, så utløser vi en "reflow" for å sikre at animasjonen starter igjen når vi legger til klassen i neste trinn (sammen med det vanlige innhold - error klasse). Nå har vi også en fin pop animasjon på vår feilstatus:
Vi nærmer oss ferdig nå. Vi har sjekket for at innsatsen fra brukeren er riktig, og vi har gitt en måte å vise feil på, så nå trenger vi bare å gjøre API-forespørselen vår.
Vi gjør dette inne i vår hvis() setning som bekrefter brukerens innspill.
javascript hvis (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (funksjon (svar) // når ferdig) .fail (funksjon (data) // når forespørselen mislykkes); annet / * vår andre kode her * /
Som du kan se fra koden ovenfor, har vi satt opp en AJAX-forespørsel til iTunes API. Som du kanskje husker fra tidligere, har iTunes API en "oppslag" -adresse vi kan slå for å få data tilbake. Det følger dette formatet: https://itunes.apple.com/lookup?id= etterfulgt av IDen til tingen du vil finne. API-en gir et eksempel på et søknadsprogram for programvare ved hjelp av Yelp-appen: https://itunes.apple.com/lookup?id=284910350. Hvis du går til den nettadressen i nettleseren din, ser du et rot av JSON:
Hvis du kjører det gjennom en linter, som JSON lint, blir resultatene formatert og vil begynne å gi mye mer mening:
Hvis du ser på API-dokumentasjonen, vil du legge merke til at API gir resultater for all slags innhold i iTunes-butikken, alt fra musikk til filmer til apper. Det er en fordel for oss fordi det betyr at vi kan ta tak i ikonet kunstverk, ikke bare for iOS-apper, men også Mac-apper! Mac-apper bruker samme type nettadressestruktur som iOS-apper. For eksempel, Final Cut Pro har en lenke til https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Legg merke til at nettadressen begynner med https: // itunes og har / id424389933, som er akkurat det vi trenger!
Bruk vår feilfunksjon fra tidligere, la oss kaste en feil for hvis / når vår API-forespørsel mislykkes:
javascript hvis (Gimmie.userInputIsValid) $ .ajax (url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId, dataType: 'JSONP') .done (funksjon (svar) // når ferdig) .fail (funksjon (data) Gimmie.throwError ('iTunes API-feil', 'Det oppstod en feil å hente informasjonen. Sjekk iTunes-nettadressen eller prøv igjen senere.');); annet / * vår andre kode her * /
Da vi abstrakte vår metode for å vise feil i en enkelt funksjon, er det enkelt å vise en annen feil!
La oss nå bekymre oss om hva som skjer når forespørselen fullføres vellykket:
javascript $ .ajax (/ * annen kode her * /) .done (funksjon (svar) // Få det første svaret og logg det var svar = response.results [0]; console.log (respons); ) .fail (funksjon (data) / * annen kode her * /);
Merk her at vi får svaret og logger det første resultatet til konsollen. Hvis du ser på et eksempel på API-forespørsel, ser du at det øverste nivået av JSON-objektet får du RESULTCOUNT som forteller deg hvor mange resultater det er (i oppslag bør det bare være en) og deretter resultater som er en matrise (med et enkelt objekt i dette tilfellet) som representerer resultatet.
Så setter vi svaret på det første elementet i resultatene og logger det deretter på konsollen. Hvis du åpner vår lille app i nettleseren og skriver inn en nettadresse (for eksempel Yelp-nettadressen https://itunes.apple.com/lookup?id=284910350) Du vil se at brukergrensesnittet sitter fast i lastetilstanden, men hvis du ser på utviklingsverktøyene og går til konsollen, ser du vårt API-svar logget inn. Vi kan nå få tilgang til noen av disse egenskapene i JavaScript!
Som du kan se, returnerer API en masse informasjon om appen: navn, utvikler, beskrivelse, sjanger, pris og mye mer! Vi trenger egentlig bare noen få av de tingene, som appens ikon. Så, vi vil sjekke for å bare sørge for at vår forespørsel inneholder informasjonene vi trenger.
"javascript $ .ajax (/ * annen kode her * /) .done (funksjon (svar) // Få det første svaret og logg det var svar = response.results [0]; console.log (response);
// Sjekk for å se om forespørselen er gyldig og inneholder informasjonen vi vil ha // Hvis det gjør det, gjør det. Ellers kast en feil hvis (svar && response.artworkUrl512! = Null) Gimmie.render (respons); ellers Gimmie.throwError ('Ugyldig respons', 'Forespørselen du har laget ser ut til å ikke ha et tilknyttet ikon.
Prøv en annen nettadresse. ' ); ) .fail (funksjon (data) / * annen kode her * /); " Her sjekker vi for å være sikker respons eksisterer og vi sjekker for å være sikker response.artworkUrl512 er en del av det svaret. artworkUrl512 er nøkkelen som API gir en link til ikonet for full størrelse. Hvis disse tingene er til stede, skal vi vise appikonet på siden. For det har vi en annen funksjon som heter gjengi som vi vil skrive om et øyeblikk. Hvis det av en eller annen grunn mangler ting vi mangler, kaster vi en ny feil med vår fine funksjon vi allerede har laget.
Nå som vi har API-en som returnerer dataene vi ønsker, la oss gjøre resultatene på siden. Når vi vet at vi har alt vi trenger fra API, kaller vi Gimmie.render (respons) og send API-responsen til den, som bare er et objekt av nøkkel / verdi-par. Så, tilbake i vår Gimmie objekt, la oss lage gjengi funksjon:
'+ response.trackName +'javascript var Gimmie = / * vår andre kode her * / gjengi: funksjon (svar) var icon = nytt bilde (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content .html (dette) .append ('
Her er hva vi gjør i denne koden:
ikon og bruk Bilde() konstruktør som i utgangspunktet oppretter et HTMLImageElement. Tenk på det som å lage en ![]()
src Attributt av bildet vårt ved å bruke icon.src metode tilgjengelig for bruk fordi vi brukte Bilde() konstruktør. Vi setter bildets kilde til artworkUrl512 av vårt svar. Dette vil gjøre at nettleseren begynner å hente bildet ved den angitte nettadressen.icon.onload for å fortelle nettleseren "når du er ferdig med å hente bildet, gjør dette ...". Dette er en måte å få nettleseren til å hente en bilderessurs, og ikke så sette den inn i DOM før den er lastet ned.icon.onload vi angir HTML for $ innhold til bildet vi nettopp hentet. Deretter kan vi legge til mer informasjon til det innholdsområdet hvis vi vil. I dette eksemplet tar jeg tak i trackName fra vår API-respons for å vise appens navn sammen med ikonet.toggleLoading Fungerer fordi vi er ferdige med å laste alt!Prøv å kjøre dette i nettleseren din nå, og du bør se et fint ikonoppslag! For eksempel, prøv Yelp-nettadressen https://itunes.apple.com/us/app/yelp/id284910350?mt=8
Prøv det med en Mac-app-nettadresse, som Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12
Legg merke til at iOS-ikonet ikke er avrundet. Som nevnt tidligere, er de fleste iOS-ikoner ikke designet med avrundede hjørner. De brukes på OS-nivå. For IOS-ikoner må vi bruke masken vi opprettet i Sketch. Så, hvis du går inn i Sketch og eksporterer den masken vi opprettet som et bildeobjekt, laster vi det inn i nettleseren når vi laster ikonet:
"javascript var Gimmie = gjengivelse: funksjon (svar) varikon = nytt bilde (); icon.src = response.artworkUrl512; icon.onload = function () Gimmie. $ content.html (dette) .append
'+ response.trackName +' Faktisk ikon dimensjoner: '+ this.naturalWidth +' × '+ this.naturalHeight +'
') .removeClass (' content-error '); Gimmie.toggleLoading ();// Hvis det er et iOS-ikon, legg inn masken også hvis (response.kind! = 'Mac-software') var mask = nytt bilde (); mask.src = 'assets / img / icon-mask.png'; mask.onload = function () Gimmie. $ content.prepend (dette); "
Her er det vi gjør:
Bilde() Konstruktør som før, sett inn src av bildet til der vi lagret masken vår, og legg den deretter til innholdsområdet vårt en gang i på Last hendelsen branner for bildet.Nå må vi bare legge til noen stiler for å plassere masken over ikonet:
css .content img [src * = "icon-mask.png"] posisjon: absolutt; venstre: 0; topp: 0;
Det er det! Hvis du angir Yelp-nettadressen igjen, vil denne gangen vises med avrundede hjørner!
Det har vært ganske en reise, og jeg håper du har lært mye av denne opplæringen! Vi dekket å lage wireframes og mocks for vår app og dens forskjellige stater. Vi har også dekket å skrive HTML, CSS og Javascript for en webapp som grensesnitt med en tredjeparts API.
Forhåpentligvis har du forstått noen grunnleggende grensesnitt med en API. Du har lært hvordan du dynamisk trekker innhold og eiendeler fra en API og gjør alt til en nettside. Med den grunnleggende kunnskapen kan du nå flytte på å skape mer tilpassede webapper skreddersydd for dine interesser.
Her er en liste over noen APIer der ute:
