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.
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!
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
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:
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:
Următoarele două metode sunt expuse de Autocomplete:
De asemenea, putem asocia funcții de apel invers în următoarele evenimente personalizate:
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ă.
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 , și . Butoanele sunt complet accesibile și conforme cu ARIA, adăugând sau eliminând rolurile și stările corespunzătoare atunci când este necesar. API este relativ simplu în acest moment, dar acoperă toate elementele esențiale, cu trei opțiuni configurabile și o singură metodă de invocare; opțiunile de configurare sunt după cum urmează:
Evenimentul la care ne putem lega pentru a executa o funcție de apel invers și pentru a reacționa la interacțiune este clic eveniment; nativul clic evenimentul browserului este folosit cu excepția cazului în butoanele radio sau în caseta de selectare, caz în care evenimentul este declanșat de widget, nu elementul de bază.
Utilitatea finală nouă care se găsește în jQuery UI 1.8 este utilitarul Mouse, care este folosit de alte componente ale bibliotecii pentru a distribui mai bine implementările conexe ale aceluiași comportament de către diferite widget-uri. Acest lucru este grozav pentru dezvoltatori, deoarece înseamnă că, dacă interacțiunea mouse-ului este un comportament necesar al unui widget UI personalizat, logica în acest utilitar poate fi utilizată fără a trebui să o rescrieți manual. La fel ca și componenta Meniu, acest utilitar ar trebui să fie considerat beta și supus unei revizuiri considerabile în versiunile viitoare.
API este foarte compact; există doar trei opțiuni configurabile; există o serie de metode private care sunt utilizate intern de plugin, dar nimic nu ar trebui să invocăm manual. Opțiunile configurabile sunt după cum urmează:
jQuery UI 1.8 se modelează pentru a fi o versiune fină a bibliotecii; cu o combinație de bug-fixe și componente noi, arată ca o piatră de hotar importantă în foaia de parcurs a bibliotecii. Ne-am uitat prima data la noul sistem de pozitionare al bibliotecii, care ne ofera acces usor la un numar imens de diferite elemente de pozitionare a unui element in raport cu alt element. Apoi am analizat cele două componente noi Autocomplete și Button și am văzut diferitele opțiuni de configurare, metode și evenimente expuse de fiecare API.