O introducere în YUI

Ok, acum că ați auzit ceva despre YUI, să începem să ne uităm la un cod!

Inclusiv Biblioteca

YUI permite o mulțime de flexibilitate atunci când vine vorba de încărcarea bibliotecii; Să ne uităm la câteva căi pe care le puteți face.

Metoda 1: Fișier YUI 3 Seed

Fișierul de semințe este modul preferat pentru a obține YUI pe pagina dvs. Doar includeți fișierul de semințe YUI (numai ~ 6KB), apoi includeți modulele pe care le doriți prin JavaScript. Să examinăm un exemplu:

YUI.use () va face o solicitare pentru a obține modulele necesare și vă va transmite o instanță YUI în callback-ul care are toate modulele necesare. Elementele YUI 2 pot fi incluse, de asemenea, prin trecerea în numele modulului, prefixate de yui2-. Dacă includeți o componentă YUI 2, atunci puteți accesa instanța YUI 2 prin Y.YUI2.

Metoda 2: Configurator YUI 3

Acest instrument bazat pe web vă permite să alegeți modulele de care aveți nevoie și vă permite să descărcați sau să vă conectați la un fișier miniat cu toate aceste dependențe (aceasta este similară cu instrumentul UI jQuery). De asemenea, oferă statistici privind modul în care fișierele vor afecta încărcările paginilor.

Metoda 3: SimpleYUI

SimpleYUI este un instrument recent lansat care simplifică includerea YUI pentru cei care sunt obișnuiți să includă doar o bibliotecă JavaScript și care au acces la tot. Doar includeți fișierul SimpleYUI și veți obține o instanță globală YUI mapată la variabila Y cu module de manipulare DOM, AJAX și UI disponibile.

Cu SimpleYUI puteți utiliza din nou toate celelalte module YUI dinamic, încărcându-le cu metoda YUI.use.

 Y.use ('dd-drag', funcția (Y) // set up drag and drop);

SimpleYUI are potențialul de a ajuta cu adevărat la adoptarea YUI, deoarece îl face mult mai accesibil și mai familiar programatorilor proveniți din biblioteci, cum ar fi jQuery.

DOM manipulare

Manipularea DOM este foarte ușoară în YUI 3 și sintaxa ar trebui să fie destul de familiară dacă ați folosit jQuery în trecut.

YUI oferă două metode de obținere a nodurilor DOM, prin modulul Nod.

1. Y.one ( 'selecter') - returnează un nod YUI reprezentând un nod DOM.
2. Y.all ( 'selecter') - returnează un NodeList YUI pentru toate meciurile

Iată un exemplu.

 // Y.one var node = Y.one ('# test-div'); // a lua-mi nodul cu id test-div var node2 = Y.one (document.body); // Y.one acceptă și un element DOM Y.one ('# my-list'). Get ('id'); // lista mea // Y.all var nodes = Y.all ('# my-list li'); // toate articolele din lista mea // lanțuri var nodes2 = Y.one ('# my-list') toate ('li'); // toate elementele listă ale listei mele var parent = Y.one ('# my-list') get ('parentNode'); // returnează părintele din lista mea (ca obiect YUI Node)

YUI oferă, de asemenea,Test"pentru a vedea dacă un element se potrivește cu un selector

 var node = Y.one ('# test-div'); // dacă nodul are clasa primară dacă (node.test ('. primal')) doSomething (); 

YUI oferă, de asemenea obține și a stabilit metode de manipulare a atributelor nodurilor și funcții de confort cum ar fi addClass și removeClass.

 // primiți și setați Y.one ('# test-div') get ('id'); Y.one ('# test-div') set ('innerHTML', 'Test Content'); // addClass, removeClass Y.one ('# test-div') addClass ('evidențiat'); // adaugă clasa la un div divin ('p') removeClass ('evidențiat'); // elimină clasa din toate elementele p

Evenimente

Evenimentele sunt atașate utilizând YUI-urile pe metodă. Puteți să apelați această metodă pe un nod sau pe instanța YUI. De exemplu:

 // a apelat la instanța YUI // myevent | faceți clic pe namespaces acest handler onclick la myevent (folosit pentru eliminarea mai târziu) Y.on ("myevent | click", funcția () // do ceva, "#test p"); // apelează pe NodeList Y.all ("# test p") pe ("myevent | click", funcția () // face ceva);

O caracteristică interesantă a YUI este că dacă utilizați metoda din primul exemplu, selectorul nu trebuie să aibă imediat o potrivire. YUI va continua să efectueze sondaj pentru un meci de până la 15 secunde după terminarea încărcării paginii, ceea ce înseamnă că nu trebuie să așteptați ca documentul să fie încărcat să îl folosească (nu trebuie să încheiați manipularea evenimentului într-o funcție document.load).

De asemenea, observați că am prefixat tipul de eveniment cu un șir opțional care numește evenimentul. Puteți folosi acest lucru pentru a detașa mai târziu evenimentul, dacă doriți.

 Y.all ("# test p") detach ("myevent | click");

De asemenea, puteți simula evenimente ...

 . Y.one ( "# test") simula ( "clic");

... și a declanșat evenimente personalizate.

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

YUI 3 acceptă de asemenea evenimente touch care vă permit să adăugați suport pentru aplicația dvs. JavaScript pentru dispozitive mobile. Un potential gotcha este că trebuie să includeți modulul "event-touch" folosind YUI.on pentru ca evenimentele touch să funcționeze.

 Y.one ("# test") la ('touchstart', funcția () // a început un eveniment tactil);

AJAX

Solicitările AJAX sunt gestionate prin intermediul modulului IO al YUI 3. Un apel AJAX este efectuat cu ajutorul funcției io funcție, după cum se arată mai jos.

 Y.io ('/ url / to / call', // aceasta este o metodă postare: 'POST', // serialize formularul formularului: id: "my_form", useDisabled: true, // ajax lifecycle event handlers pe: complete: funcția (id, răspuns) var data = response.responseText; // datele de răspuns.);

IO metoda acceptă ca parametri un URL și un obiect de configurare. Obiectul de configurare este foarte configurabil, dar am inclus câteva din cele mai comune opțiuni din exemplul de mai sus.

1. metodă - ce metodă HTTP să utilizați
2. formă - dacă această opțiune este specificată, formularul cu ID-ul dat va fi serializat și va fi transmis împreună cu cererea.
3. pe - acest obiect stabilește procesatori de evenimente pentru diferite etape ale ciclului de viață al cererii.

YUI lui io Modul vă permite, de asemenea, să trimiteți solicitări în mai multe domenii folosind un fișier bazat pe Flash furnizat de Yahoo. Cu toate acestea, există anumite avertismente. Mai întâi, trebuie să aveți o copie a fișierului flash YUI pe serverul dvs. pentru a face efectiv cererea și, în al doilea rând, domeniul pe care îl accesați trebuie să aibă un fișier de politică cu domenii intermediare care vă acordă acces.

 Y.io ('http: //www.somedomain/web/service/', metoda: 'POST', date: 'data = 123', // foloseste flash xdr: use: 'flash', dataType: xml ' // manipulatorii evenimentului pe durata ciclului de viață ajax: complet: funcția (id, răspunsul) var data = response.responseText; // datele de răspuns.);

JSONP este, de asemenea, acceptat, dar prin YUI JSONP modul, nu IO modul.

 Y.jsonp (someurl, funcția (răspunsul) // handle jsonp response);

Un alt modul care este destul de util împreună cu AJAX este modulul JSON. Acest lucru vă permite să analizați cu ușurință solicitarea AJAX care returnează JSON. JSON poate fi analizat folosind metoda JSON.parse

 var obj = Y.JSON.parse (răspunsul.responseText);

Animaţie

YUI 3 conține un modul de animație care poate fi utilizat pentru a efectua aproape orice fel de animație. Sintaxa este un pic diferit de jQuery, așa că haideți să aruncăm o privire.

Animațiile apar în câțiva pași în YUI. Mai întâi, ați configurat un nou obiect de animație care descrie animația dvs., apoi o rulați.

 // animați o div de la nici o mărime la o înălțime și o lățime de 100 de var animație = nou Y.Anim (nod: '# my-div', // selector la nodul pe care doriți să îl animați. (opțional) de la: height: 0, width: 0, // valori pentru a anima prea spre: height: 100, width: 100, duration: 0.5, // set easing duration: Y.Easing.easeOut // setați relaxarea); animation.run ();

Toate proprietățile pot fi modificate utilizând .obține() și .a stabilit() pe obiectul de animație, permițându-vă să modificați animația sau elementele DOM pentru animație. Animațiile declanșează și evenimente care pot fi ascultate.

 // Animația este un animație Y.Anim obiect ('end', funcția () // declanșată după finalizarea animației);

Luate împreună, obiectul de animație YUI poate fi folosit pentru a crea tot felul de animații în aplicația dvs..

Widget-uri

Una dintre cele mai frumoase caracteristici ale YUI este widget-urile sale. YUI 3 are în prezent un set limitat de widget-uri (tab-uri, un cursor și o suprapunere pentru a numi câteva), dar oferă un cadru puternic pentru crearea propriilor widget-uri YUI 3. YUI 2, pe de altă parte, are o enormă bibliotecă de widget-uri. Iată câteva:

• DataTable - un widget complet de tabel de date cu încărcare și paginare ajax, suport pentru celule editabile, coloane redimensionabile și îmbunătățiri progresive.
• ImageCropper - un widget care ajută la tăierea imaginilor.
• LayoutManager - widget pentru a face machete complexe prin JavaScript.
• Calendar - un widget calendar pop-up.

Există mai multe widget-uri pe care le puteți utiliza și le puteți găsi pe site-ul web al dezvoltatorului YUI 2

.

CSS Biblioteci

Ultima componentă pe care o vom analiza rapid este bibliotecile YUI CSS. YUI 3 oferă patru resurse CSS.

• Resetare CSS - reguli de resetare CSS de bază. Toată lumea are propria idee despre ceea ce ar trebui să facă un fișier de resetare, astfel încât să puteți sau nu să vă placă acest lucru.
• Baza CSS - aceste stiluri se bazează pe stilurile Resetați pentru a oferi o redare consecventă în toate browserele acceptate. Acest fișier furnizează elemente cum ar fi stilurile de intrare, dimensiunile anteturilor și stilurile de tabelă.
• Fonturi CSS - normalizează dimensiunile fontului pentru toate fișierele acceptate. Odată ce această foaie de stil este aplicată, dimensiunile fontului sunt modificate utilizând procentajele conform unei tabele furnizate de YUI. Resursa de fonturi YUI CSS este folosită de popularul HTML5Boilerplate.
• CSS Grids - un cadru de rețea CSS pentru a ajuta la aspectul. Nu sunt un fan al rețelelor în general, dar dacă doriți să aflați mai multe, Andrew Burgess are o scriere frumoasă a acestui pe Nettuts+.

Concluzie

Acesta a fost doar o privire rapidă asupra câtorva componente și module pe care YUI le oferă. În cazul în care acest articol ți-a afectat interesul, vă recomandăm să vă îndreptați către documentația dezvoltatorului YUI și să găsiți ce altceva oferă YUI. Care sunt impresiile tale? Dacă ați folosit YUI în trecut, ce părere aveți despre el?