Kako zgraditi boljši UX s podatki HTML5 - * Atributi
Ali ste kdaj želeli dodati podatke po meri določenemu elementu HTML, da bi kasneje dostopali do njega z JavaScriptom? Preden se je HTML5 pojavil na trgu, je bilo shranjevanje podatkov po meri, povezanih z DOM-om, resnično velika težava, zato so morali razvijalci uporabljati vse vrste neprijetnih hakov, kot je uvedba nestandardnih atributov ali uporaba zastarele metode setUserData () za reševanje težave.
Na srečo vam tega ni treba več delati, saj je HTML5 uvedel novo globalno podatki- * atribute, ki omogočajo vdelavo dodatnih informacij o vseh elementih HTML. Novi podatki- * lastnosti naredite HTML bolj razširljiv, zato omogočajo izgradnjo zahtevnejših aplikacij, in ustvarite bolj dovršeno uporabniško izkušnjo, ne da bi morali uporabiti tehnike, ki zahtevajo veliko virov, kot so Ajax-klici ali poizvedbe baz podatkov strežnika.
Podpora za nove globalne atribute brskalnika je relativno dobra, saj jih podpirajo vsi moderni brskalniki (IE8-10 jih delno podpira).
Sintaksa podatki- * Lastnosti
Sintaksa novega podatki- * atributov je podoben atributom, določenim z arijo. Namesto zapisa lahko vstavite poljubno vrsto niza * znak. Vsakemu atributu morate dodeliti tudi vrednost v obliki niza.
Recimo, da želite ustvariti O nas stran in shranite ime oddelka, kjer vsak delavec dela. Ni vam treba storiti ničesar drugega, razen dodajanja podatkovni oddelek atribut po meri za ustrezen element HTML na naslednji način:
- John Doe
- Jane Doe
Po meri podatki- * atributi so globalni, tako kot razred in id atribute, tako da jih lahko uporabite na vsakem elementu HTML. Dodate lahko tudi toliko podatki- * atributi oznake HTML, kot želite. V zgornjem primeru lahko na primer uvedete klicani atribut po meri uporabnik podatkov za shranjevanje uporabniških imen zaposlenih.
- John Doe
- Jane Doe
Če želite elementu HTML dodati lasten atribut po meri, ga morate vedno predpredeliti z oznako podatkov- niz. Podobno, ko v kodi nekoga drugega vidite atribut s predpono podatkov, lahko zagotovo veste, da je atribut po meri, ki ga je avtor predstavil..
Kdaj uporabiti in kdaj ne uporabljati atributov po meri
W3C določa po meri podatki- * atributi:
“Atributi podatkov po meri so namenjeni shranjevanju zasebnih podatkov po meri na stran ali aplikacijo, za katere ni več ustreznih atributov ali elementov.”
To je vredno razmisliti o uporabi podatki- * lastnosti če ne najdete nobenih drugih semantičnih atributov za podatke, ki jih želite shraniti.
Ni najboljša ideja, da jih uporabljate samo za styling namene, saj lahko izbirate med razred in slog lastnosti. Če želite shraniti podatkovni tip, za katerega ima HTML5 semantični atribut, kot je Datum čas atribut za Uporabite to namesto atributa s predpono podatkov.
Pomembno je omeniti to podatki- * atributi imajo podatke, ki so zasebno stran ali aplikacijo, kar pomeni, da jih bodo uporabniški agenti prezrli, kot so roboti iskalnikov in zunanje aplikacije. Do atributov, ki imajo predpono s podatki, lahko dostopate samo s kodo, ki se izvaja na spletnem mestu, ki gosti HTML.
Po meri podatki- * atributi so v veliki meri uporabljeni v okvirjih frontendov, kot so Bootstrap in Zurb Foundation. Dobra novica je, da ni nujno, da morate vedeti, kako napisati JavaScript, če želite uporabiti atribute s predpono, ki je predpona, kot del okvira, saj jih morate le dodati v kodo HTML, da sprožite funkcionalnost vnaprej pripravljen JavaScript vtičnik.
Odrezek kode spodaj doda opis orodja na levi strani gumba v zagonskem traku z uporabo preklapljanje podatkov in umestitev podatkov atributov po meri in jim dodeli ustrezne vrednosti.
Cilj podatki- * Atributi s CSS
Čeprav ga ni priporočljivo uporabljati podatki- * atribute samo za namene oblikovanja, lahko izberete elemente HTML, ki jim pripadajo, s pomočjo splošnih selektorjev atributov. Če želite izbrati vsak element, ki ima določen atribut s predpono podatkov, uporabite to skladnjo v CSS:
li [uporabnik podatkov] barva: modra;
Upoštevajte, da uporabniška imena, ki bodo v zgornjem odseku kode prikazana v modri barvi - potem ko vsi podatki, shranjeni v atributih po meri, niso vidni, - ampak imena zaposlenih v elementov (v primeru “John Doe” in “Jane Doe”).
Če želite izbrati samo elemente, v katerih ima atribut s predpono podatkov določeno vrednost, je to sintaksa za uporabo:
li [data-department = "IT"] border: solid blue 1px;
Uporabite lahko vse bolj zapletene selektorje atributov CSS, kot je izbirnik splošnega kombinatorja sester ([data-value ~ = "foo"]) ali izbirni znak ([data-value * = "foo"]), z atributi s predpono podatkov.
Dostop podatki- * Atributi z JavaScriptom
Dostopate lahko do podatkov, shranjenih v meri podatki- * atributi z JavaScriptom z uporabo lastnosti niza podatkov ali jQuery's data () metodo.
Vanilla JavaScript
The podatkovni niz lastnina je last podjetja HTMLElement vmesnik, kar pomeni, da ga lahko uporabite na kateri koli oznaki HTML. The podatkovni niz lastnina omogoča dostop do vseh običajev podatki- * atributi danega elementa HTML. Atributi se vrnejo kot DOMStringMap predmet, ki vsebuje en vnos za vsakega podatki- * atribut.
V našem O nas Primer strani lahko preprosto preverite atribute po meri “Jane Doe” je z uporabo podatkovni niz na naslednji način:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap uporabnik: "janedoe", oddelek: "IT" To lahko vidite v vrnjenem DOMStringMap predmet podatkov- predpisi se odstranijo iz imen atributov (uporabnika namesto uporabnik podatkov, in oddelek namesto podatkovni oddelek). Atribute morate uporabiti v istem formatu, če želite dostopati samo do vrednosti določenega atributa s predpono s podatki (namesto seznama vseh atributov po meri, kot je prikazan zgoraj).
Vrednost določenega lahko pridobite podatki- * atribut kot lastnost podatkovni niz nepremičnine. Kot sem že omenil, morate izpustiti podatkov- predpono iz imena lastnosti, tako da, če želite dostopati do vrednosti Jane's uporabnik podatkov atribut, lahko to storite tako:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's data () metodo
The data () Metoda jQuery omogoča pridobitev vrednosti atributa s predpono. Tukaj morate tudi izpustiti podatkov- predpono iz imena atributa za pravilen dostop. V našem primeru lahko prikažete opozorilno sporočilo z imenom oddelka, kjer “Jane” deluje z naslednjo kodo:
$ ("# jane"). hover (funkcija () var department = $ ("# jane"). podatki ("oddelek"); opozorilo (oddelek);); The data () Metoda mora biti uporabljena previdno, saj ne deluje le kot sredstvo za pridobivanje vrednosti atributa s predpono, temveč tudi za povezavo podatkov elementu DOM na naslednji način:
var town = $ ("# jane") podatki ("mesto", "New York"); Dodatni podatki, ki jih pripnete z jQuery data () metoda se očitno ne bo pojavila v HTML kodi kot nova podatki- * atribut, tako da, če se obe tehniki uporabljata istočasno, bo dani element HTML shranil dva niza podatkov, enega s HTML, drugo pa z jQuery.
V našem primeru “Jane” dobil je nove podatke po meri ("mesto") z jQuery, vendar se novi par ključ / vrednost ne bo pojavil v HTML kot nov podatkovno mesto atribut. Shranjevanje podatkov na dva različna načina ni najboljša praksa uporabite samo eno od dveh metod hkrati.
Dostopnost in podatki- * Lastnosti
Kot podatki se hranijo po meri podatki- * atributi so zasebni, podporne tehnologije morda ne bodo imele dostopa do njih. Če želite, da je vaša vsebina dostopna za invalidne uporabnike, ni priporočljivo shranjevati vsebine, ki je lahko tako pomembna za uporabnike.
