Kako izgraditi bolji UX s HTML5 podacima - * atributima

Jeste li ikada željeli dodati prilagođene podatke određenom HTML elementu kako biste kasnije pristupili JavaScriptu? Prije nego što se HTML5 pojavio na tržištu, pohranjivanje prilagođenih podataka povezanih s DOM-om bilo je prava gužva, a programeri su morali koristiti sve vrste neugodnih hakiranja, kao što je uvođenje nestandardnih atributa ili korištenje zastarjele metode setUserData () za rješavanje problema.

Srećom više ne morate to činiti, jer je HTML5 uveo novi globalni podaci-* atribute koji omogućuju ugradnju dodatnih informacija na bilo koji HTML element. Novi podaci-* atributi učiniti HTML proširivim, stoga omogućuju izgradnju složenijih aplikacija, i stvoriti sofisticiranije korisničko iskustvo bez korištenja resursno intenzivnih tehnika kao što su Ajax-pozivi ili upiti baze podataka na poslužitelju.

Podrška za nove globalne atribute preglednika je relativno dobra jer ih podržavaju svi moderni preglednici (IE8-10 ih djelomično podržava).

Sintaksa podaci-* Značajke

Sintaksa novog podaci-* atributi slični su atributima s prefiksom arije. Možete umetnuti bilo koji niz malih slova umjesto * znak. Također morate dodijeliti vrijednost svakom atributu u obliku niza.

Recimo da želite stvoriti O nama i pohranite naziv odjela u kojem svaki zaposlenik radi. Ne morate učiniti ništa drugo osim dodavanja podataka odjel prilagođeni atribut za odgovarajući HTML element na sljedeći način:

 
 
 John Doe 
 
 Jane Doe 
 

Prilagođen podaci-* atributi su globalni, baš kao i klasa i iskaznica atribute, tako da ih možete koristiti na svakom HTML elementu. Također možete dodati onoliko podaci-* atributima HTML oznake kao što želite. U gornjem primjeru, na primjer, možete uvesti novi prilagođeni atribut pozvan Podaci korisnika za spremanje korisničkih imena zaposlenika.

 
 
 John Doe 
 
 Jane Doe 
 

Kao opće pravilo, ako želite dodati vlastiti prilagođeni atribut HTML elementu, uvijek ga morate prefiksati s oznakom podaci- niz. Isto tako, kada vidite atribut s prefiksom podataka u nekom drugom kodu, možete sa sigurnošću znati da je to prilagođeni atribut koji je uveo autor.

Kada koristiti i kada ne koristiti prilagođene atribute

W3C definira običaj podaci-* atributi kao što su:

“Prilagođeni atributi podataka namijenjeni su za spremanje privatnih podataka na stranici ili aplikaciji, za koje nema više odgovarajućih atributa ili elemenata.”

Vrijedi razmisliti o korištenju podaci-* atributi kada ne možete pronaći druge semantičke atribute za podatke koje želite pohraniti.

Nije najbolje koristiti ih isključivo u svrhu oblikovanja, jer to možete odabrati iz klasa i stil atributa. Ako želite pohraniti vrstu podataka za koju HTML5 ima semantički atribut, kao što je Datum vrijeme atribut za element, koristite ga umjesto atributa s prefiksom podataka.

Važno je to imati na umu podaci-* atributi sadrže podatke koji su privatne stranice ili aplikacije, što znači da će ih korisnički agenti ignorirati, kao što su roboti tražilice i vanjske aplikacije. Atributima s prefiksom podataka može se pristupiti samo pomoću koda koji se izvodi na web-lokaciji koja sadrži HTML.

Prilagođen podaci-* atributi su opsežno korišteni od strane frontend okvira, kao što su Bootstrap i Zurb Foundation, kao dobro. Dobra vijest je da ne morate nužno znati kako pisati JavaScript ako želite koristiti atribute s prefiksom podataka kao dio okvira, jer ih samo trebate dodati u HTML kôd da biste pokrenuli funkcionalnost unaprijed pripremljeni JavaScript dodatak.

Isječak koda u nastavku dodaje opis alata s lijeve strane gumba u programu Bootstrap korištenjem alata Podaci-preklopni i podataka plasman prilagođenih atributa i dodjeljivanje odgovarajućih vrijednosti njima.

  Opis alata na lijevoj strani 

Cilj podaci-* Atributi s CSS-om

Iako nije preporučljivo koristiti podaci-* atribute samo za potrebe stila, možete odabrati HTML elemente kojima pripadaju uz pomoć općih selektora atributa. Ako želite odabrati svaki element koji ima određeni atribut s prefiksom podataka, upotrijebite ovu sintaksu u CSS-u:

 li [korisnik podataka] boja: plava; 

Napominjemo da korisnička imena koja će biti prikazana plavom bojom u isječku koda iznad - nakon što svi podaci pohranjeni u prilagođenim atributima nisu vidljivi - ali imena zaposlenika u

 li [data-department = "IT"] border: solid blue 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", odjel: "IT" 

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe

 $ ("# jane"). hover (funkcija () var department = $ ("# jane"). podaci ("odjel"); alert (odjel););

 var town = $ ("# jane") podaci ("grad", "New York");