Een inleiding tot YUI

Ok, nu dat je een beetje hebt gehoord over YUI, laten we beginnen met het bekijken van een code!

Inclusief de bibliotheek

YUI biedt veel flexibiliteit bij het laden van de bibliotheek; laten we eens kijken naar een paar manieren waarop je het kunt doen.

Methode 1: YUI 3-zaadbestand

Het seedbestand is de voorkeursmanier om YUI op uw pagina te krijgen. Voeg eenvoudig het YUI-seedbestand toe (slechts ~ 6KB) en voeg vervolgens de gewenste modules toe via JavaScript. Laten we een voorbeeld bekijken:

YUI.use () zal een verzoek doen om de vereiste modules te krijgen, en zal u een YUI-instantie doorgeven in de callback die alle vereiste modules heeft. YUI 2-componenten kunnen ook worden toegevoegd door de modulenaam in te voeren, voorafgegaan door yui2-. Als u een YUI 2-component opneemt, kunt u via Y.YUI2 toegang krijgen tot de YUI 2-instantie.

Methode 2: YUI 3-configurator

Met deze webgebaseerde tool kun je de modules kiezen die je nodig hebt en kun je een verkleind bestand met al deze afhankelijkheden downloaden of linken (dit is vergelijkbaar met de tool voor jQuery-gebruikersinterfaces). Het biedt ook statistieken over hoe de bestanden van invloed zijn op het laden van pagina's.

Methode 3: SimpleYUI

SimpleYUI is een recent uitgebrachte tool die YUI-integratie vereenvoudigt voor mensen die gewend zijn om alleen een JavaScript-bibliotheek toe te voegen en overal toegang toe hebben. Voeg eenvoudig het SimpleYUI-bestand toe en u krijgt een globale YUI-instance toegewezen aan de Y-variabele met DOM-manipulatie, AJAX en UI-effectmodules beschikbaar.

Met SimpleYUI kunt u nog steeds alle andere YUI-modules dynamisch gebruiken door ze te laden met de YUI.use-methode.

 Y.use ('dd-drag', functie (Y) // stel slepen en neerzetten in);

SimpleYUI heeft de potentie om echt YUI-adoptie te helpen omdat het het veel toegankelijker en vertrouwder maakt voor programmeurs die afkomstig zijn van bibliotheken zoals jQuery.

DOM-manipulatie

DOM-manipulatie is erg gemakkelijk in YUI 3 en de syntaxis zou redelijk bekend moeten zijn als u in het verleden jQuery hebt gebruikt.

YUI biedt twee methoden voor het ophalen van DOM-knooppunten via de module Node.

1. Y.one ( 'selecter') - retourneert een YUI-knooppunt dat een DOM-knooppunt vertegenwoordigt.
2. Y.all ( 'selecter') - retourneert een YUI-knooppuntlijst van alle overeenkomsten

Hier is een voorbeeld.

 // Y.one var node = Y.one ('# test-div'); // haal me het knooppunt met de id test-div var node2 = Y.one (document.body); // Y.one accepteert ook een DOM-element Y.one ('# mijn-lijst'). Get ('id'); // mijn-lijst // Y.all var nodes = Y.all ('# mijn-lijst li'); // alle lijstitems van mijn -lijst // chaining var nodes2 = Y.one ('# my-list'). all ('li'); // alle lijstitems van mijn lijstlijst var parent = Y.one ('# my-list'). get ('parentNode'); // geeft het bovenliggende element van mijn lijst (als een YUI-knooppuntobject)

YUI biedt ook een 'test'methode om te zien of een element overeenkomt met een selector

 var node = Y.one ('# test-div'); // als knooppunt de primaire klasse if heeft (node.test ('. primary')) doSomething (); 

YUI biedt ook krijgen en reeks methoden om knooppuntattributen te manipuleren en gemaksfuncties zoals addClass en removeClass.

 // krijg en stel Y.one in ('# test-div'). get ('id'); Y.one ('# test-div'). Set ('innerHTML', 'Test Content'); // addClass, removeClass Y.one ('# test-div'). addClass ('gemarkeerd'); // voegt klasse toe aan één div Y.all ('p'). removeClass ('marked'); // verwijdert klasse van alle p-elementen

Evenementen

Gebeurtenissen worden bevestigd met behulp van YUI's op methode. U kunt deze methode op een knooppunt of op de YUI-instantie aanroepen. Bijvoorbeeld:

 // opgeroepen YUI-instantie // mijnevent | klik op naamruimten deze onclick-handler naar myevent (gebruikt voor verwijdering later) Y.on ("myevent | click", function () // do something, "#test p"); // heeft NodeList Y.all ("# test p") aangeroepen. on ("myevent | click", function () // do something);

Een interessante eigenschap van YUI is dat als u de methode uit het eerste voorbeeld gebruikt, de selector niet meteen een overeenkomst hoeft te hebben. YUI blijft gedurende maximaal 15 seconden polling uitvoeren voor een overeenkomst nadat de pagina is geladen, wat betekent dat u niet hoeft te wachten totdat het document is geladen om het te gebruiken (u hoeft uw gebeurtenishandlers niet in te pakken) in een document.load-functie).

Merk ook op dat we het gebeurtenistype hebben toegevoegd met een optionele tekenreeks die de gebeurtenis een naam geeft. U kunt dit gebruiken om de gebeurtenis later te beëindigen als u dat wenst.

 Y.all ("# test p"). Ontkoppel ("mijnevent | klik");

Je kunt ook evenementen simuleren ...

 . Y.one ( "# test") te simuleren ( "klik");

... en aangepaste evenementen maken.

 Y.one ( "# test") fire ( "myevents: custom_event_one.");

YUI 3 ondersteunt ook aanraakgebeurtenissen waarmee u ondersteuning aan uw JavaScript-toepassing voor mobiele apparaten kunt toevoegen. Eén potentiële gotcha is dat je de "event-touch" -module moet gebruiken met YUI.on om touch events te laten werken.

 Y.one ("# test"). Aan ('touchstart', functie () // een aanraakgebeurtenis gestart);

AJAX

AJAX-verzoeken worden afgehandeld via de IO-module van YUI 3. Een AJAX-oproep wordt gedaan met behulp van de io functie, zoals hieronder aangetoond.

 Y.io ('/ url / to / call', // dit is een postmethode: 'POST', // serialiseer het formulierformulier: id: "my_form", useDisabled: true, // ajax lifecycle event handlers aan: complete: function (id, response) var data = response.responseText; // Response data.);

De IO methode accepteert een URL en een configuratieobject als parameters. Het configuratieobject is in hoge mate configureerbaar, maar ik heb een aantal van de meest gebruikte opties in het bovenstaande voorbeeld opgenomen.

1. methode - welke HTTP-methode te gebruiken
2. het formulier - als deze optie is opgegeven, wordt het formulier met de opgegeven id geserialiseerd en doorgegeven aan de aanvraag.
3. op - dit object stelt gebeurtenishandlers in voor verschillende fasen in de levenscyclus van de aanvraag.

YUI's io module stelt u ook in staat om crossdomeinverzoeken te verzenden met behulp van een op Flash gebaseerd bestand dat wordt aangeboden door Yahoo. Er zijn echter enkele kanttekeningen. Ten eerste moet u een kopie van het YUI-flash-bestand op uw server hebben om daadwerkelijk het verzoek te doen, en ten tweede moet het domein waartoe u toegang hebt een interdomeinbeleidbestand hebben dat u toegang verleent.

 Y.io ('http: //www.somedomain/web/service/', method: 'POST', data: 'data = 123', // gebruik flash xdr: use: 'flash', dataType: ' xml ' // ajax lifecycle event handlers aan: complete: function (id, response) var data = response.responseText; // Response data.);

JSONP wordt ook ondersteund, maar via de YUI JSONP module, niet de IO module.

 Y.jsonp (someurl, function (response) // handle jsonp response);

Nog een module die erg handig is in combinatie met AJAX is de JSON-module. Hiermee kunt u eenvoudig een AJAX-aanvraag parseren die JSON retourneert. JSON kan worden geparseerd met behulp van de JSON.parse-methode

 var obj = Y.JSON.parse (response.responseText);

animatie

YUI 3 bevat een animatiemodule die kan worden gebruikt om vrijwel elke soort animatie uit te voeren. De syntaxis is een beetje anders dan die van jQuery, dus laten we een kijkje nemen.

Animaties vinden plaats in een paar stappen in YUI. Eerst stelt u een nieuw animatieobject op dat uw animatie beschrijft, waarna u het uitvoert.

 // animeer een div vanaf geen grootte naar een hoogte en breedte van 100 var animation = new Y.Anim (node: '# my-div', // selector naar het knooppunt dat u wilt animeren. // waarden om te animeren vanaf (optioneel) van: height: 0, width: 0, // waarden om ook te animeren naar: height: 100, width: 100, duration: 0.5, // set duration easing: Y.Easing.easeOut // Vereenvoudiging instellen); animation.run ();

Alle eigenschappen kunnen worden gewijzigd met behulp van .krijgen() en .set () op het animatieobject, zodat u de animatie of de DOM-elementen kunt wijzigen om te animeren. Animaties vuren ook gebeurtenissen op die ook kunnen worden beluisterd.

 // animatie is een Y.Anim-object animation.on ('end', function () // ontslagen nadat animatie is voltooid);

Alles bij elkaar genomen, kan het YUI-animatieobject worden gebruikt om allerlei soorten animaties in uw toepassing te maken.

widgets

Een van de leukste functies van YUI zijn de widgets. YUI 3 heeft momenteel een beperkte set widgets (tabbladen, een schuifregelaar en een overlay om er een paar te noemen), maar biedt een krachtig raamwerk voor het maken van uw eigen YUI 3-widgets. YUI 2, aan de andere kant, heeft een enorme bibliotheek met widgets. Hier zijn een paar:

• DataTable - een complete gegevenstabel-widget met ajax-laden en paginering, bewerkbare celondersteuning, schaalbare kolommen en progressieve verbetering.
• ImageCropper - een widget die helpt bij het bijsnijden van afbeeldingen.
• LayoutManager - widget om complexe lay-outs te maken via JavaScript.
• Kalender - een pop-upkalenderwidget.

Er zijn veel meer widgets die u kunt gebruiken en u kunt ze allemaal vinden op de YUI 2-ontwikkelaarswebsite

.

CSS-bibliotheken

Het laatste onderdeel waar we snel naar gaan kijken, zijn de YUI CSS-bibliotheken. YUI 3 biedt vier CSS-bronnen.

• CSS Reset - standaard CSS-resetregels. Iedereen heeft zijn eigen idee van wat een reset-bestand moet doen, dus je kunt dit wel of niet leuk vinden.
• CSS-basis - deze stijlen bouwen voort op de Reset-stijlen om consistente weergave in alle ondersteunde browsers te bieden. Dit bestand biedt dingen als invoerstijlen, kopgroottes en tabelstijlen.
• CSS-lettertypen - normaliseert lettergrootten in alle ondersteunde bestanden. Nadat deze stylesheet is toegepast, worden de tekengrootte gewijzigd met behulp van percentages volgens een tabel die YUI biedt. De YUI CSS Fonts-resource wordt gebruikt door de populaire HTML5Boilerplate.
• CSS-rasters - een CSS-rasterkader om te helpen bij lay-out. Ik ben geen fan van roosters in het algemeen, maar als je meer wilt weten, heeft Andrew Burgess een mooie beschrijving van deze op Nettuts+.

Conclusie

Dit was slechts een korte blik op enkele componenten en modules die YUI aanbiedt. Als dit artikel je interesse heeft gewekt, raad ik je aan om naar de YUI-ontwikkelaarsdocumentatie te gaan en te vinden wat YUI nog meer biedt. Wat zijn uw indrukken? Als u YUI in het verleden hebt gebruikt, wat vindt u daarvan??