Toegang krijgen tot meerdere bibliotheken via de Google API - dummies

U kunt een aantal externe bibliotheken openen met behulp van de Google API op. Al deze bibliotheken gebruiken een gemeenschappelijk domein, // ajax. googleapis. com, waardoor het veel gemakkelijker wordt om applicaties in te stellen, zodat gebruikers een minimum aan sitetoegang tot hun systeem toestaan. In dit geval hoeft de gebruiker slechts één domein toe te staan ​​in plaats van meerdere. Natuurlijk is het leuk om te zien hoe dit proces in de praktijk werkt, dus dit voorbeeld laat zien hoe je jQuery, jQuery UI en MooTools mengt met de Google API-aanpak. U verkrijgt de voordelen van alle drie bibliotheken, met behulp van een enkel domein.

In dit geval gebruikt het voorbeeld jQuery om taken uit te voeren zoals het selecteren van paginaobjecten, het maken van speciale effecten en het monitoren van gebeurtenissen. jQuery UI voert elke vereiste output van de gebruikersinterface uit. MooTools biedt toegang tot wiskundige functionaliteit die niet wordt gevonden in jQuery of de gebruikersinterface van jQuery. In dit geval werkt u met een generator voor willekeurige getallen die gemakkelijker te gebruiken is dan de JavaScript-tegenpartij.

Een van de items die ontbreekt op de documentatiepagina voor de Google API is de locatie van de jQuery-gebruikersinterfacethema's. U moet een themakoppeling opnemen om de juiste weergave voor de jQuery-gebruikersinterface-functies te creëren. Het standaardthema wordt niet gehost in de Google API. Gelukkig worden de thema's van ThemeRoller gehost, maar niet gedocumenteerd. Hier zijn de URL's die u nodig hebt om de ThemeRoller-thema's te gebruiken:

• black-tie

• blitzer

• Cupertino

• dark-hive

• dot-luv

• aubergine

• Excite-bike

• flick

• hot -sneaks

• mensheid

• le-kikker

• mint-choc

• bewolking

• pepper-grinder

• Redmond

• gladheid

• zuid-straat

• start

• zonnige

• chic-purse

• trontastic

• ui-duisternis

• ui-lightness

• vader

Dit voorbeeld begint met een lege HTML5-pagina (een die begint met een richtlijn). Om toegang te krijgen tot de vereiste API's, moet u enkele links toevoegen. Drie links wijzen naar jQuery, jQuery UI en MooTools. De vierde link is naar het jQuery UI-stylesheet. In het voorbeeld wordt de stijl sunny gebruikt, maar u kunt dit in elke gewenste stijl wijzigen. Hier is de code die u moet toevoegen voor de koppelingen (merk op dat elke URL op één regel moet verschijnen).

Het HTML-gedeelte van het voorbeeld is vrij eenvoudig. Het bestaat uit een koptekst, een alinea, een knop en een paar elementen zoals hier getoond.

Meerdere bibliotheken tegelijk gebruiken
Genereer een willekeurig getal tussen 1 en 100
0

Het SampleNumber bevat het nummer dat wordt gegenereerd door de generator voor willekeurige getallen.Deze waarde wordt geplaatst in een container, Output, om een ​​mooi geformatteerd vak in de uitvoer te creëren. De knop biedt de mogelijkheid om het willekeurige nummer te wijzigen met JavaScript-code die wordt geboden door een combinatie van jQuery, jQuery UI en MooTools.

Het voorbeeld vereist ook wat stijlinformatie om een ​​mooi geformatteerde outputbox en het startpunt voor het voorbeeld te maken. De volgende stijl is alles wat je nodig hebt.

. Normaal {achtergrondkleur: # 7fffff; de kleur zwart; rand: groef; grensbreedte: 5px; opvulling: 3px; hoogte: 20 px; width: 100px;}

Op dit moment bent u klaar om een ​​code toe te voegen. Het script voor dit voorbeeld laat zien hoe de verschillende bibliotheken samen kunnen worden gebruikt. U zou waarschijnlijk een meer gecompliceerde pagina maken voor productiedoeleinden.

$ (function () {// Gebruik een jQuery UI-knop. $ ("# NewNumber"). Button (); $ ("# NewNumber"). Click (function () {// Gebruik MooTools om een random // number. var RandNum = Number. random (1, 100); // Geef het resultaat weer op het scherm met // jQuery. $ ("# SampleNumber"). html (RandNum); // Maak een animatie met de gebruikersinterface van jQuery. if (RandNum> = 1 && RandNum = 21 && RandNum = 41 && RandNum = 61 && RandNum <= 80) {$ ("# sampleNumber"). animeren ({backgroundColor: "Yellow", color: "Black", borderColor: "Groen"}, 1500);} else {$ ("# SampleNumber"). Animeren ({backgroundColor: "# B0E0E6", kleur: "Navy", borderColor: "Maroon"}, 1500);}})})

Het voorbeeld begint met het wijzigen van de HTML-knop in een jQuery UI Button-widget die u op verschillende manieren zou kunnen manipuleren. De twee taken die in het voorbeeld worden uitgevoerd, zijn de knop opmaken om te werken met de stijl van de jQuery-gebruikersinterface en om een ​​manier te bieden om click () -gebeurtenissen vast te leggen.

De eerste taak die het script moet uitvoeren, is het maken van een willekeurig getal. U kunt deze taak uitvoeren met JavaScript, maar de MooTools-techniek die in het voorbeeld wordt getoond, is een stuk eenvoudiger. De oproep naar nummer. random () plaatst een waarde tussen 1 en 100 in RandNum. Nu je een willekeurig nummer hebt, plaatst de code het in het SampleNumber door de html () -methode met de waarde van RandNum aan te roepen.

Op dit moment zou je kunnen zeggen dat het voorbeeld compleet is. Het voorbeeld gaat echter een stap verder. Het bepaalt het numerieke bereik van RandNum en gebruikt het animate () -effect van jQuery UI om de kleur van de uitvoer op het scherm te wijzigen.