Ce sa schimbat în jQuery UI 1.8 - plus cărți gratuite!

jQuery UI 1.8 este în prezent la etapa candidatului de lansare și, în afară de descoperirea unui bug major sau defect, va deveni în scurt timp actuala versiune stabilă a bibliotecii oficiale UI a jQuery. Deci, ce sa schimbat de la ultima lansare stabilă a 1.7.2? Una dintre diferențele majore este că biblioteca rulează acum pe cea mai recentă versiune a jQuery - versiunea 1.4.1, însă au existat multe alte modificări, inclusiv adăugarea unor noi componente noi pe care le vom analiza cursul acestui articol.


Copii gratuite ale jQuery UI 1.7

Autorul acestui articol, Dan Wellman, a lansat recent jQuery UI 1.7, de la Packt Publishing. Este o citire fantastică și sunt bucuros să anunț că avem o mână de copii pentru a da la întâmplare. Pur și simplu lăsați un comentariu despre articol, și veți fi automat introdus în desen. Verificați din nou luni pentru a afla dacă sunteți câștigător!


1. Bug Zapping

Această versiune a bibliotecii aduce câteva corecții de erori pentru unele componente cheie, inclusiv widget-urile Datepicker și Dialog și ajutoarele de interacțiune care pot fi reduse, redimensionabile și selectabile. Niciunul dintre bug-uri nu a fost de tip "show-stoppers", dar, totuși, eliminarea bug-urilor este o parte critică a evoluției continue a bibliotecii. Un aspect important este acela că beforeclose evenimentul widgetului Dialog a fost depreciat și înlocuit cu beforeClose astfel încât să urmeze aceeași convenție de denumire ca și evenimentele din alte componente.

Pe lângă bug-urile din cod, au fost abordate și câteva aspecte legate de stil și accesibilitate; în special textul titlului widget-urilor Dialog nu mai poate dispărea în spatele pictogramei apropiate, iar navigabilitatea cu tastatură a noului widget de buton a fost îmbunătățită. Pentru o listă completă a tuturor erorilor de eroare incluse în versiunea 1.8, consultați comenzile de schimbare de la http://jqueryui.com/docs/Changelog/1.8rc1


2.Positioning

jQuery UI are acum un sistem de poziționare unic, care poate fi folosit ori de câte ori un widget trebuie poziționat în raport cu alt element, cum ar fi un meniu derulant sau un buton de pliere. Funcția de poziționare ne permite să specificăm cu ușurință, folosind o serie de șiruri simple, care parte a elementului poziționat trebuie fixată la ce parte a elementului țintă specificat. De exemplu, "stânga sus" punctul unui element poate fi fixat la "dreapta-jos" de alt element specificat.

Utilitatea are, de asemenea, un sistem robust de detectare a coliziunii care împiedică spectatorii paginii să fie expuși la barele de instrumente inestetice dacă elementul poziționat devine prea aproape de marginea portului de vizualizare sau altfel nu poate ocupa locul său poziționat.

API pentru acest utilitar este compact, cu doar 7 opțiuni configurabile în acest stadiu. Acest lucru ne oferă tot controlul de care avem nevoie și totuși ne permite să specificăm până la 81 posibilele combinații de poziționare; opțiunile pe care le putem configura include următoarele:

la:
Se referă la poziția elementului țintă pe care elementul poziționat va fi fixat; metoda acceptă un singur șir format din valoarea pentru axa orizontală (fie dreapta, centru, sau stânga) urmată de valoarea pentru axa verticală (fie top, centru, sau fund). Nu există niciun caracter separator între cele două valori.
bgiframe:
Dacă pluginul bgiframe este disponibil pe pagină, această opțiune va aplica un element iframe shim la elementul poziționat, ceea ce poate ajuta la prevenirea selectării elementelor de selecție care se afișează deasupra conținutului poziționat în IE6.
coliziune:
Această opțiune determină modul în care sunt gestionate coliziunile; acceptă unul dintre următoarele șiruri de caractere: flip-, potrivi sau nici unul. Valoarea implicită este flip-, care determină poziționarea elementului pentru a inversa poziția față de elementul țintă, de exemplu,. "centru drept" va deveni "centru stâng".
mele:
Se referă la poziționarea elementului; acceptă aceleași valori ca și la.
de:
Acceptă un selector jQuery specificând elementul țintă.
ofset:
Specificați un număr de pixeli pentru a compensa elementul poziționat pe elementul țintă.
utilizând:
O funcție de apel invers poate fi utilizată cu această opțiune, permițându-vă să animați poziționarea elementului.

3. Autocompletare

Una dintre widgeturile mele favorite a revenit ca o componentă oficială a UI! Autocompletarea a fost un widget beta într-o versiune de la începutul anului 1.6 a bibliotecii și este acum înapoi după un refactor complet. Acesta este atașat la intrările de text de pe pagină și furnizează o listă de opțiuni posibile atunci când un vizitator începe să scrie în câmpul de text.

Widget-ul poate lua datele sale (elementele potrivite din meniul de sugestii) dintr-o varietate de surse, inclusiv un array JavaScript standard, JSON printr-o cerere AJAX sau o funcție flexibilă de apel invers care poate implementa orice sursă de date și returnează un răspuns personalizat pentru a fi afișat în în meniul de sugestii.

Autocomplete este un widget foarte configurabil și oferă un API complet de opțiuni, metode și evenimente pentru a face uz. Este complet personalizabil prin intermediul SteamRoller și navigabil cu tastatură complet. Toate componentele oferă o mulțime de funcționalități paginilor dvs. La un moment dat, cache-ul poate fi, de asemenea, un comportament configurabil.

Să aruncăm o privire la API-ul său; conține următoarele trei opțiuni de configurare:

întârziere:
Putem specifica numărul de milisecunde pe care widget-ul ar trebui să îl aștepte înainte de a afișa meniul de sugestii atunci când vizitatorul începe să scrie în intrare.
MINLENGTH:
Această opțiune ia un număr întreg care se referă la numărul de caractere care trebuie introduse în intrare înainte ca meniul de sugestii să fie afișat.
sursă:
Configurăm sursa de date utilizând această opțiune; valorile posibile includ o serie de șiruri de caractere reprezentând elementele de afișat în meniul de sugestii sau o serie de obiecte în care fiecare obiect conține două proprietăți - prima este eticheta prezentată în meniul de sugestii, a doua este valoarea care va fi adăugată la intrarea dacă este selectat un element din meniul de sugestii. De asemenea, putem furniza un singur șir reprezentând o resursă la distanță care să poată returna datele în mod asincron sau o funcție de retur care poate solicita datele și să le returneze widgetului în formatul necesar.

Următoarele două metode sunt expuse de Autocomplete:

închide:
Se utilizează pentru a închide meniul de sugestii.
căutare:
Efectuați o căutare a datelor disponibile și afișați sugestiile dacă se potrivește termenul. Poate lua o valoare predefinită ca termen care este trecut în metoda ca argument sau valoarea câmpului de intrare asociat cu.

De asemenea, putem asocia funcții de apel invers în următoarele evenimente personalizate:

Schimbare:
Tras după ce un element din meniul de sugestii este selectat și meniul este închis.
închide:
Declanșat ori de câte ori meniul de sugestii este închis, indiferent dacă a fost selectat sau nu un element. Pregătește Schimbare eveniment.
concentra:
Apăsat direct înainte de focalizare este acordat unui element din meniul de sugestii.
deschis:
Concediat după returnarea datelor, înaintea afișării meniului de sugestii.
căutare:
Tras direct înainte ca sursa de date să fie căutată. Căutarea poate fi anulată prin întoarcere fals de la o funcție de apel invers legată la acest eveniment.
Selectați:
Acest eveniment este declanșat când un element din meniu înainte de închiderea meniului.

Ca bonus special, fișierul sursă pentru widget-ul Autocomplete conține, de asemenea, widget-ul beta din meniu, care este încă în curs de dezvoltare și urmează să fie lansat într-o versiune ulterioară a bibliotecii. Până acum seamănă cu o adăugare robustă și atractivă la bibliotecă și ne permite să transformăm o listă neordonată într-un meniu atractiv sau derulant. Multe caracteristici sunt acceptate, inclusiv sub-meniuri, pictograme, separatoare și chiar și un meniu de găurit cu pâslă.


4. Buton

Butonul widget ne permite să implementăm butoane atractive și funcționale care pot fi configurate să se comporte ca un anumit tip de buton; de exemplu, putem șterge butoanele standard, butoanele în stil radio în care poate fi selectat numai un singur buton dintr-un set sau butoanele de stil de verificare în care poate fi selectat un număr dintr-un anumit set. Pot fi create mai multe tipuri de butoane care includ un meniu derulant simplu.

Este un widget foarte flexibil și poate fi construit folosind o varietate de elemente de bază, inclusiv