Slik får du tilgang til flere biblioteker fra Google API-dummier

Du kan få tilgang til en rekke tredjepartsbiblioteker ved hjelp av Google API på. Alle disse bibliotekene bruker et felles domene, // ajax. googleapis. com, noe som gjør det mye enklere å konfigurere applikasjoner slik at brukerne tillater minimum tilgang på nettstedet til systemet. I dette tilfellet trenger brukeren bare tillate ett domene i stedet for flere. Selvfølgelig er det fint å se hvordan denne prosessen fungerer i praksis, så dette eksempelet viser hvordan du blander jQuery, jQuery UI og MooTools ved hjelp av Google API-tilnærmingen. Du får fordelene med alle tre bibliotekene, ved hjelp av et enkelt domene.

I dette tilfellet bruker eksemplet jQuery til å utføre oppgaver som å velge sideobjekter, lage spesialeffekter og overvåke hendelser. jQuery brukergrensesnitt utfører alle nødvendige brukergrensesnittutganger. MooTools gir tilgang til matematisk funksjonalitet som ikke finnes i jQuery eller jQuery UI. I dette tilfellet jobber du med en tilfeldig talgenerator som er enklere å bruke enn JavaScript-motparten.

Et av elementene som mangler på dokumentasjonssiden for Google API, er plasseringen av jQuery UI-temaene. Du må inkludere en temakobling for å opprette riktig utseende for jQuery UI-funksjonene. Standardtemaet er ikke vert på Google API. Heldigvis er temaene fra ThemeRoller vert, men ikke dokumentert. Her er nettadressene du trenger for å bruke ThemeRoller-temaene:

• black-tie

• blitzer

• Cupertino

• dark-strukturen

• dot-luv

• aubergine

• opphisse-sykkel

• flick

• hot -sneaks

• menneskeheten

• le-frosk

• mint-choc

• overskyet

• pepper-jeksel

• Redmond

• glatthet

• Sør-street

• start

• solrik

• swanky-vesken

• trontastic

• ui mørket

• ui-lightness

• vader

Dette eksemplet begynner med en tom HTML5-side (en som begynner med et direktiv). For å få tilgang til de nødvendige APIene må du legge til noen koblinger. Tre koblinger peker til jQuery, jQuery UI og MooTools. Den fjerde lenken er til jQuery UI-stilarket. Eksemplet bruker stilen solfylt , men du kan endre det til hvilken som helst stil du vil ha. Her er koden du må legge til for linkene (Merk at hver nettadresse skal vises på en linje).

HTML-delen av eksemplet er ganske grei. Den består av en header, et avsnitt, en knapp og noen få elementer som vist her.

Bruke flere biblioteker sammen
Generer et tilfeldig tall mellom 1 og 100
0

SampleNumber inneholder nummeret som genereres av tilfeldig talgeneratoren.Denne verdien er plassert i en container, Output, for å lage en pent formatert boks i utgangen. Knappen gir midler for å endre tilfeldig tall ved hjelp av JavaScript-kode som er levert av en kombinasjon av jQuery, jQuery UI og MooTools.

Eksemplet krever også litt stilinformasjon for å lage en pent formatert utdatafelt og utgangspunktet for eksemplet. Følgende stil er alt du trenger.

. Normal {bakgrunnsfarge: # 7fffff; farge svart; grense: spor; kantbredde: 5px; polstring: 3px; høyde: 20px; bredde: 100px;}

På dette tidspunktet er du klar til å legge til noe kode. Skriptet for dette eksemplet viser hvordan du bruker de forskjellige bibliotekene sammen. Du vil sannsynligvis opprette en mer komplisert side for produksjonsformål. $ ("# NewNumber"). Klikk (funksjon () {// Bruk MooTools for å generere en tilfeldig // nummer. var RandNum = Antall. tilfeldig (1, 100); // Vis resultatet på skjermen ved hjelp av // jQuery. $ ("# SampleNumber"). html (RandNum); // Opprett en animasjon ved hjelp av jQuery UI hvis (RandNum = 21 && RandNum = 41 && RandNum = 61 && RandNum <= 80) {$ ("# sampleNumber"). animate ({backgroundColor: "Yellow", farge: "Black", borderColor: "Green"}, 1500);} else {$ ("# SampleNumber"). Animate ({backgroundColor: "# B0E0E6", farge: "Navy", borderColor: "Maroon"}, 1500);}})})

Eksemplet begynner med å endre HTML-knappen til en jQuery UI Button-widget som du kan manipulere på forskjellige måter. De to oppgavene som eksemplet utfører, er å formatere knappen for å jobbe med jQuery UI-stilen og å gi et middel til å fange klikk () hendelser.

Den første oppgaven som skriptet må utføre, er å opprette et tilfeldig tall. Du kan utføre denne oppgaven ved hjelp av JavaScript, men MooTools-teknikken som vises i eksemplet, er mye enklere. Anropet til nummer. tilfeldig () plasserer en verdi mellom 1 og 100 i RandNum. Nå som du har et tilfeldig tall, plasserer koden det i SampleNumber ved å ringe html () metoden med verdien av RandNum.

På dette punktet kan du si at eksemplet er fullført. Eksemplet går imidlertid et skritt videre. Det bestemmer numerisk rekkevidde for RandNum og bruker jQuery UI animate () effekten til å endre fargen på utgangen på skjermen.