Share
Atributul de date HTML5 vă permite să atribuiți date personalizate unui element. Acest articol se uită la modul de utilizare și oferă exemple de când ar fi utilizat în mod ideal.
Înainte de HTML5 am trebuit să ne bazăm pe utilizarea atributelor "class" sau "rel" pentru a stoca fragmente mici de date pe care le-am putea folosi pe site-urile noastre. Acest lucru a condus uneori la probleme și ar putea provoca conflicte între stilul și funcționalitatea site-urilor web. Apariția HTML5 a introdus un nou atribut cunoscut sub numele de "date". În acest articol voi studia câteva exemple despre modul în care vom folosi acest atribut, precum și modul în care acesta ar trebui utilizat corect.
Pe măsură ce site-urile web devin din ce în ce mai multe date și sunt asemănătoare cu aplicațiile, ele încep să dețină mai multe date despre anumite elemente. Luați, de exemplu, dacă am crea o aplicație audio. S-ar putea să avem marcaj standard, cum ar fi:
Marcajul de mai sus este perfect acceptabil, dar uneori am putea dori să stocăm mai multe informații despre fiecare piesă decât sursa. De exemplu, este posibil să dorim să putem aloca alte informații despre piesă, cum ar fi durata, tempo-ul și artistul. Am putea face acest lucru prin atribuirea atributelor personale de date fiecărei surse audio, cum ar fi:
Prin furnizarea acestor atribute de date personalizate, putem efectua sarcini cum ar fi căutarea, filtrarea sau gruparea acestora în cadrul aplicației noastre, pe durata, tempo sau artist, folosind valorile asociate.
Numele unui atribut de date trebuie să înceapă cu șirul "data-" și trebuie să conțină cel puțin un caracter după cratimă folosind orice convenție de denumire HTML.
Specificația W3C pentru atributele de date prevede că:
Atributele de date personalizate sunt destinate să stocheze date personalizate personale paginii sau aplicației, pentru care nu există atribute sau elemente mai adecvate.
Aceasta înseamnă că ar trebui să folosim aceste date numai în cadrul aplicației noastre și nu ar trebui să fie utilizate pentru afișarea informațiilor utilizatorilor noștri. De asemenea, este important să rețineți că puteți atribui un număr de atribute personalizate unui element cu orice valoare.
Am analizat deja modul în care puteți folosi atributul de date, dar pentru a obține o înțelegere clară, să analizăm câteva exemple.
Din fericire, Webdesigntuts + au acoperit deja unele tutoriale detaliate pe câteva exemple de caz bun. Unele dintre tuts se uită la modul în care le puteți utiliza pentru a modela și afișa bule de notificare din meniu atribuind elementul de notificare într-o etichetă de ancorare. De data aceasta, atributul de date este utilizat pentru a indica valoarea bubble-ului bulei de notificare.
Profil
Într-un alt sfat rapid, putem vedea și cum se utilizează ca parte a marcajului pentru un sfat util
Acesta este linkul
Acest timp este folosit pentru a afișa textul pentru butonul de instrucțiuni.
Nu ar trebui să folosim atribute de date pentru nimic care are deja un atribut deja stabilit sau mai adecvat. De exemplu, ar fi inadecvată utilizarea:
Accentsconagua
8 seara când am putea folosi deja definit datetime atribut în interiorul unui timp element ca mai jos:
Atributele de date nu ar trebui să fie utilizate ca o alternativă la meta date sau microformate. Formatele micro sunt concepute în primul rând pentru oameni și au fost introduse pentru a da contextul nostru de marcare. De exemplu, dacă aveți o Vcard care furnizează informații de contact despre o persoană sau o organizație, atunci îi dați o clasă de "vcard" pentru a permite mașinilor să înțeleagă că acestea sunt informații de contact.
Folosind formatarea micro, ar trebui să utilizați marcajele ca
Aaron Lumsden
în loc de a utiliza atributul de date, cum ar fi
Aaron Lumsden
Pentru a afla mai multe despre microformate puteți vizita Mircorformats.org.
Odată ce am implementat atributele de date în cadrul marcajului HTML, putem să le vizăm utilizând CSS. Este important să rețineți că nu ar trebui să utilizați atribute de date direct pentru utilizarea stilului, deși, în unele cazuri, poate fi adecvat. Direcționarea atributelor de date în CSS este similară cu direcționarea altor atribute, le puteți folosi pur și simplu astfel:
[data-role = "pagina"] / * Stiluri * /
De exemplu, dacă creați un site sau o aplicație prietenoasă pentru dispozitive încrucișate, atunci este posibil să doriți să vizați anumite conținuturi pe care ar trebui să le vizualizați doar pe telefonul mobil. Luați următoarea marcare
Conținut numai pentru mobile
Utilizând CSS, puteți să ascundeți toate paginile numai pentru dispozitivele mobile atunci când sunt vizualizate pe un desktop.
div [date-role = "mobile"] afișare: niciunul;
Deși nu este recomandat să ascundeți conținutul bazat pe dispozitivul de vizionare, pot exista cazuri în care acest lucru este potrivit. Ar trebui să vă bazați pe fiecare circumstanță și caz în parte.
De asemenea, este posibil să utilizați datele din atribut și să le afișați prin CSS. Deși specificația spune că nu ar trebui să utilizați datele din atributul personalizat pentru a le afișa utilizatorilor dvs., se poate face și, în unele cazuri, se poate dovedi cea mai bună metodă. Așa se realizează.
Test
În CSS veți folosi pseudo elementul "after" (sau un alt conținut generat) și utilizați atributul ca parte a conținutului "după", după cum urmează:
.test display: inline-block; .test: după content: attr (data-content);
Acest lucru ar afișa apoi "Acesta este conținutul div" în ".text" div.
Acum am analizat modul în care puteți viza elemente cu atributul de date utilizând CSS, să examinăm cum puteți obține aceste date utilizând jQuery.
Notă: Prelucrarea datelor nu se află în sfera de aplicare a acestui tutorial, deoarece acest tutorial vizează în special dezvoltatorii și designerii de la front.
Există câteva moduri prin care putem obține datele din element folosind jQuery. Să ne uităm la unele dintre ele.
Dacă am avea o etichetă de ancoră, ca cea de mai sus, care avea un atribut de date de date-info, atunci putem accesa acele date în același mod în care am obține orice altă valoare a atributului.
$ ('.button') faceți clic pe (funcția (e) e.preventDefault (); thisdata = $ (this) .attr ('data-info');Puteți testa acest lucru deschizând consola JS din inspectorul dvs. Web, apoi apăsând linkul ...
Lucrul minunat despre atributul de date este că îl putem folosi și pentru a furniza date de tip json ca acesta.
Folosind jQuery putem obține aceste date folosind metoda obiectului de date jQuery.
$ ('.button') faceți clic pe (funcția (e) e.preventDefault (); thisdata = $ ('div'). Exemplul de mai sus ar înregistra apoi "bar" în jurnalul consolei.
Știu că înainte de a vă îngreuna să folosiți acest atribut nou, veți dori să știți care browsere o susțin și când puteți începe să o utilizați. Vestea bună este că este bine susținută în toate browserele moderne. Orice care acceptă codul HTML va putea accesa atributul de date. Dacă utilizați acest atribut pentru scopuri de stil, precum și pentru a accesa datele (utilizați cu prudență), browserul va trebui să suporte selectorii CSS3.
Știri chiar mai bune este că toate browserele (chiar și IE7) vă permit să utilizați deja atributul data * pe elemente și dacă utilizați jQuery 1.4 sau mai mult, puteți accesa datele folosind obiectul de date jQuery. Cu toate acestea, dacă utilizați doar JavaScript, va trebui să accesați datele utilizând metoda "getAttribute" a JavaScript.
Pentru lista completă de sprijin a setului de date puteți verifica canIuse.com.
Pe măsură ce site-urile web și aplicațiile web devin mai complexe și încep să dețină mai multe informații și date, acest atribut nou este cu siguranță un plus de bun venit pentru setul de instrumente. Am folosit-o în câteva exemple din lumea reală acum și am găsit o modalitate foarte utilă de a furniza un site mai rapid (mai rapid), deoarece datele care ar fi trebuit altfel să fie trase din server pot fi acum generate în marcajul și utilizat atunci când este necesar.
Pentru a rezuma, dacă respectați următoarele trei reguli, puteți să vă asigurați că folosiți noul atribut în cel mai eficient și semantic mod.
Acum, că aveți o înțelegere mai profundă a atributului de date HTML5 și modul în care poate fi folosit, vă încurajez să începeți să îl implementați astăzi în proiectele dvs..
Ați folosit-o în orice exemple din lumea reală? În ce scenarii ați folosit-o? Vă economisește timp sau există ceva pe care doriți să îl vedeți extins cu acest atribut? Anunță-mă în comentariile de mai jos.
Și pentru a vedea ce altceva puteți face cu HTML5, consultați câteva din mii de fragmente de cod HTML5 utile pe Envato Market.
