Cum se construiește un UX mai bun cu atributele de date HTML *
Ați vrut vreodată să adăugați date personalizate unui anumit element HTML pentru a putea accesa ulterior acesta cu JavaScript? Înainte ca HTML5 să apară pe piață, stocarea datelor personale asociate cu DOM a fost o povară reală, iar dezvoltatorii au trebuit să folosească toate tipurile de hack-uri urâte, cum ar fi introducerea atributelor non-standard sau utilizarea metodei setUserData () depășită pentru a rezolva problema.
Din fericire, nu mai trebuie să mai faceți acest lucru, deoarece HTML5 a introdus noi tehnologii globale date-* atribute care fac posibilă încorporarea de informații suplimentare asupra oricăror elemente HTML. Noul date-* atribute face HTML mai extensibil, prin urmare vă permite să construiți aplicații mai complexe, și să creeze o experiență mai sofisticată a utilizatorilor fără a fi nevoie să utilizeze tehnici de utilizare intensivă a resurselor, cum ar fi apelurile Ajax sau interogările bazei de date de pe server.
Suportul browser-ului pentru noile atribute globale este relativ bun, deoarece acestea sunt suportate de toate browserele moderne (IE8-10 le suportă parțial).
Sintaxa lui date-* atribute
Sintaxa noului date-* atributele sunt similare cu cele ale atributelor prefixate arie. Puteți introduce orice șir de caractere minuscule în locul funcției * semn. De asemenea, trebuie să atribuiți o valoare fiecărui atribut sub forma unui șir.
Să presupunem că vrei să creezi un Despre noi pagina și stocați numele departamentului în care lucrează fiecare angajat. Nu trebuie să faceți altceva decât adăugarea date departament atributul personalizat la elementul HTML corespunzător, după cum urmează:
- John Doe
- femeie necunoscută
Personalizat date-* atributele sunt globale, la fel ca și clasă și id atribute, astfel încât să le puteți folosi pe fiecare element HTML. Puteți adăuga, de asemenea, cât mai multe date-* atribuie unei etichete HTML așa cum doriți. În exemplul de mai sus, de exemplu, puteți introduce un atribut personalizat nou numit date de utilizator pentru a stoca numele de utilizator al angajaților.
- John Doe
- femeie necunoscută
Ca regulă generală, dacă doriți să adăugați propriul atribut personalizat unui element HTML, trebuie să îl prefixați întotdeauna cu date- şir. De asemenea, când vedeți un atribut prefixat în codul altcuiva, puteți ști sigur că este un atribut personalizat introdus de autor.
Când să utilizați și când să nu folosiți atribute personalizate
W3C definește personalizat date-* atribute cum ar fi:
“Atributele de date personalizate sunt destinate să stocheze date personalizate personale pentru pagină sau aplicație, pentru care nu există atribute sau elemente mai adecvate.”
Merită să luați în considerare utilizarea date-* atribute când nu puteți găsi alte atribute semantice pentru datele pe care doriți să le stocați.
Nu este cea mai bună idee să le folosiți numai în scopuri de styling, pentru că puteți alege din clasă si stil atribute. Dacă doriți să stocați un tip de date pentru care HTML5 are un atribut semantic, cum ar fi datetime atribut pentru element, utilizați în locul atributului prefixat cu date.
Este important să rețineți asta date-* atributele dețin datele care sunt privat de pagină sau de aplicație, ceea ce înseamnă că acestea vor fi ignorate de către agenții utilizatorilor, cum ar fi motoarele de căutare și aplicațiile externe. Atributele prefixate cu date pot fi accesate exclusiv de codul care rulează pe site-ul care găzduiește codul HTML.
Personalizat date-* atributele sunt utilizate pe scară largă de cadrele frontend, cum ar fi Bootstrap și Zurb Foundation, de asemenea. Vestea bună este că nu este necesar să știți cum să scrieți JavaScript dacă doriți să utilizați atributele prefixate de date ca parte a unui cadru, deoarece trebuie doar să le adăugați la codul HTML pentru a declanșa o funcționalitate a unui prewritten JavaScript plugin.
Fragmentul de cod de mai jos adaugă un buton de ajutor în stânga la un buton din Bootstrap utilizând funcția date de comutare si date de plasare atributele personalizate și atribuirea unor valori adecvate acestora.
Ţintă date-* Atribute cu CSS
Deși nu se recomandă utilizarea date-* atribute numai pentru scopuri de styling, puteți selecta elementele HTML de care aparțin cu ajutorul selectorilor de atribute generali. Dacă doriți să selectați fiecare element care are un anumit atribut prefixat, utilizați această sintaxă în CSS:
li [date-utilizator] culoare: albastru;
Rețineți că nu sunt numele de utilizator care vor fi afișate în albastru în fragmentul de cod de mai sus - după ce toate datele stocate în atributele personalizate nu sunt vizibile - dar numele angajaților din elemente (în exemplul “John Doe” și “femeie necunoscută”).
Dacă doriți să selectați numai elemente în care un atribut prefixat cu date are o anumită valoare, aceasta este sintaxa de utilizat:
li [data-department = "IT"] frontieră: solid albastru 1px;
Puteți utiliza toate selectorii atributului CSS mai complicați, cum ar fi selectorul general combinator de frați ([Date valoare ~ = "foo"]) sau selectorul wildcard ([Date value * = "foo"]), cu atribute de date prefixate.
Acces date-* Atribute cu JavaScript
Puteți accesa datele stocate în setările personalizate date-* atributele cu JavaScript, utilizând fie proprietatea setului de date, fie jQuery date() metodă.
Vanilla JavaScript
date CCD proprietate este proprietatea HTMLElement aceasta înseamnă că o puteți utiliza pe orice etichetă HTML. date CCD proprietate oferă acces la toate personalizate date-* atributele elementului HTML dat. Atributele sunt returnate ca a DOMStringMap obiect care conține o intrare pentru fiecare date-* atribut.
În a noastră Despre noi puteți verifica cu ușurință atributele personalizate “femeie necunoscută” prin utilizarea funcției date CCD proprietate în felul următor:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap utilizator: "janedoe", departament: "IT" Puteți vedea asta înapoi DOMStringMap obiect date- prefixele sunt eliminate din numele atributelor (utilizator in loc de date de utilizator, și departament in loc de date departament). Trebuie să utilizați atributele în același format dacă doriți să accesați doar valoarea unui anumit atribut prefixat de date (în loc de lista tuturor atributelor personalizate, cum ar fi în fragmentul de cod de mai sus).
Puteți recupera valoarea unui anumit date-* atribut ca proprietate a date CCD proprietate. După cum am menționat mai devreme, trebuie să omiteți date- prefix de la numele proprietății, deci dacă doriți să accesați valoarea lui Jane's date de utilizator atribut, puteți face acest lucru:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe lui jQuery date() metodă
date() Metoda jQuery face posibilă obținerea valorii unui atribut prefixat cu date. Aici trebuie, de asemenea, să omiteți date- prefixul de la numele atributului pentru al accesa corect. În exemplul nostru, puteți afișa un mesaj de alertă cu numele departamentului în care se află “Jane” funcționează cu următorul cod:
$ ("# jane"). (h) (functie () var depart = $ ("jane"). date() metoda trebuie să fie folosită cu atenție, deoarece nu acționează doar ca un mijloc de a obține valoarea unui atribut prefixat cu date, ci și pentru a atașa datele la un element DOM în felul următor:
Orașul var = $ ("# jane"). date ("oraș", "New York"); Datele suplimentare pe care le atașați cu jQuery date() metoda evident nu va apărea în codul HTML ca o nouă date-* atribut, deci dacă ambele tehnici sunt folosite în același timp, elementul HTML dat va stoca două seturi de date, unul cu HTML și celălalt cu jQuery.
În exemplul nostru “Jane” obțineți date personalizate noi ("oraș") cu jQuery, dar această nouă pereche cheie-valoare nu va apărea în HTML ca o nouă date oraș atribut. Stocarea datelor în două moduri diferite nu este cea mai bună practică de a spune cel puțin utilizați una dintre cele două metode simultan.
Accesibilitatea și date-* atribute
Ca datele deținute în particular date-* atributele sunt private, este posibil ca tehnologiile de asistență să nu le poată accesa. Dacă doriți să păstrați conținutul accesibil pentru utilizatorii cu handicap, nu este recomandat să stocați conținut care poate fi important pentru utilizatori în acest fel.
