Sådan får du adgang til flere biblioteker fra Google API-dummierne

Du kan få adgang til en række tredjepartsbiblioteker ved hjælp af Google API på. Alle disse biblioteker bruger et fælles domæne, // ajax. googleapis. com, hvilket gør det meget nemmere at konfigurere applikationer, så brugerne tillader et minimum af adgang til deres system. I dette tilfælde skal brugeren kun tillade et domæne i stedet for flere. Selvfølgelig er det rart at se, hvordan denne proces virker i praksis, så dette eksempel viser, hvordan du blander jQuery, jQuery UI og MooTools ved hjælp af Google API-tilgangen. Du opnår fordelene ved alle tre biblioteker ved at bruge et enkelt domæne.

I dette tilfælde bruger eksemplet jQuery til at udføre opgaver som valg af sideobjekter, oprette specialeffekter og overvågningsbegivenheder. jQuery UI udfører enhver nødvendig brugergrænsefladeudgang. MooTools giver adgang til matematikfunktionalitet, der ikke findes i jQuery eller jQuery UI. I dette tilfælde arbejder du med en tilfældig talgenerator, der er lettere at bruge end JavaScript-modparten.

Et af de elementer, der mangler på dokumentationssiden til Google API, er placeringen af ​​jQuery UI-temaerne. Du skal medtage et temalink for at skabe det korrekte udseende for jQuery UI-funktionerne. Standardtemaet er ikke hostet på Google API. Heldigvis er temaerne fra ThemeRoller hostet, men ikke dokumenteret. Her er de webadresser, du skal bruge tema-temaer:

• black-tie

• Blitzer

• cupertino

• dark-bistade

• dot-luv

• aubergine

• ophidse-cykel

• svirp

• hot -sneaks

• menneskeheden

• le-frog

• mynte-choc

• overskyet

• peber-kværn

• Redmond

• glathed

• syd-gade

• begynde

• solrig

• smarte-pung

• trontastic

• ui-mørket

• ui-lightness

• vader

Dette eksempel begynder med en tom HTML5-side (en der begynder med et direktiv). For at få adgang til de nødvendige API'er skal du tilføje nogle links. Tre links peger på jQuery, jQuery UI og MooTools. Det fjerde link er til jQuery UI-stilarket. Eksemplet bruger sunny stilen, men du kan ændre det til enhver stil, du vil have. Her er koden du skal tilføje til linkene (Bemærk, hver webadresse skal vises på en linje).

HTML-delen af ​​eksemplet er ret ligetil. Den består af et overskrift, et afsnit, en knap og et par elementer som vist her.

Brug af flere biblioteker sammen
Generer et tilfældigt tal mellem 1 og 100
0

SampleNumber indeholder det tal, der genereres af tilfældig talgeneratoren.Denne værdi er placeret i en container, Output, for at oprette en pænt formateret boks i udgangen. Knappen giver mulighed for at ændre det tilfældige tal ved hjælp af JavaScript-kode, der leveres af en kombination af jQuery, jQuery UI og MooTools.

Eksemplet kræver også nogle stiloplysninger for at oprette en pænt formateret outputkasse og udgangspunktet for eksemplet. Følgende stil er alt hvad du behøver.

. Normal {baggrundsfarve: # 7fffff; farve: sort; grænse: rille grænsebredde: 5px; polstring: 3px; højde: 20px; bredde: 100px;}

På dette tidspunkt er du klar til at tilføje nogle kode. Skriften til dette eksempel viser, hvordan man bruger de forskellige biblioteker sammen. Du vil sandsynligvis oprette en mere kompliceret side til produktionsformål. $ ("# NewNumber"). Knap (); $ ("# NewNumber"). Klik (funktion () {// Brug MooTools til at generere en tilfældig // nummer. var RandNum = Antal. tilfældigt (1, 100); // Vis resultatet på skærmen ved hjælp af // jQuery. $ ("# SampleNumber"). html (RandNum); // Opret en animation ved hjælp af jQuery UI hvis (RandNum = = 1 && RandNum = 21 && RandNum = 41 && RandNum = 61 && RandNum <= 80) {$ ("# sampleNumber").animate ({backgroundColor: "Yellow", farve: "Sort", borderColor: "Green"}, 1500);} else {$ ("# SampleNumber"). Animere ({backgroundColor: "# B0E0E6", farve: "Navy", borderColor: "Maroon"}, 1500);}})})

Eksemplet begynder ved at ændre HTML-knappen i en jQuery UI Button-widget, som du kan manipulere på forskellige måder. De to opgaver, som eksemplet udfører, er at formatere knappen til at arbejde med jQuery UI-stilen og at tilvejebringe et middel til at fange klik () -hændelser.

Den første opgave scriptet skal udføre, er at oprette et tilfældigt tal. Du kan udføre denne opgave ved hjælp af JavaScript, men MooTools teknikken vist i eksemplet er meget lettere. Opkaldet til nummer. tilfældige () placerer en værdi mellem 1 og 100 i RandNum. Nu, hvor du har et tilfældigt tal, placeres koden i SampleNumber ved at kalde html () -metoden med værdien af ​​RandNum.

På dette tidspunkt kan man sige, at eksemplet er komplet. Eksemplet går dog et skridt videre. Det bestemmer den numeriske rækkevidde af RandNum og bruger jQuery UI animate () effekten til at ændre farven på output på skærmen.