Vlad Merzhevich
Ono što je jako nedostajalo u HTML 4 bila je mogućnost kreiranja vlastitih atributa za pohranjivanje vrijednosti. Zašto je to potrebno? Evo nekoliko zadataka gdje bi to moglo biti potrebno.
- Kreiranje opisa bez upotrebe skripti.
- Odredite stil elementa na osnovu vrijednosti atributa.
- Prijem i promjena vrijednosti putem skripti.
HTML5 ima novi univerzalni atribut koji se može dodati bilo kojoj oznaci. Pravila za pisanje atributa su jednostavna:
- Uvijek počinjemo sa podacima-;
- samo koristimo pisma, crtica (-), dvotočka (:) i donja crta (_).
CSS i JavaScript pristupaju ovim atributima malo drugačije, pa pogledajmo primjere za njih zasebno.
CSSCSS ima tag atribute; ako postoji neki atribut ili data vrijednost, postavljamo traženi stil.
Sadržaj
Sada možemo stilizirati ovaj element kao div i postaviti ga na potreban dizajn. Općenito, ovo liči na način na koji klase rade, tako da to nije jedinstvena ili neophodna karakteristika. Stoga je korisnije postaviti vrijednosti.
Sadržaj
U CSS-u tada možemo postaviti različite stilove za različite vrijednosti našeg atributa data-columns.
Div (širina: 480px; ) div (širina: 720px; )
Opet, ovo je u određenoj mjeri zamjena za klase; ništa vas ne sprječava da napravite klase s imenima stupac-2, stupac-3 i dodate ih ako je potrebno.
Elegantnija aplikacija je uključiti funkciju attr(). Dobiva vrijednost datog atributa i umeće je u stil. Ovo je zgodno koristiti za kreiranje opisa alata. Tekst pišemo direktno unutar elementa i implementiramo prikaz i dizajn tooltip koristeći CSS.
Mjerač opisa alata ( pozicija: relativna; ) meter:hover::after (sadržaj: attr(data-description); pozadina: #ffe; padding: 5px; granica: 1px čvrsta #666; pozicija: apsolutna; vrh: 20px; )
Temperatura vode
U ovom primjeru, atribut data-description se dodaje elementu koji sadrži potreban tekst za prikaz. Sam prikaz se javlja pomoću pseudoelementa ::after i svojstva content, čija je vrijednost funkcija attr().
JavaScriptAko u CSS-u direktno pristupamo imenu atributa, navodeći ga u potpunosti, onda se u JavaScript-u to radi putem metode skupa podataka. Samo ime atributa se pretvara u varijablu prema sljedećim pravilima:
- podaci- odbačeni;
- svaka crtica koja prethodi slovu se odbacuje, a slovo nakon njega postaje veliko.
U praksi to izgleda ovako.
data-opis se pretvara u opis.
data-full-description postaje fullDescription.
data-description-of-tag postaje descriptionOfTag.
Tradicionalni način pristupa elementu i njegovim atributima je postavljanje id-a i pristup elementu putem getElementById , kao što je prikazano u primjeru ispod.
skup podataka Korisnik var el = document.getElementById("user"); id = el.dataset.id; // Dobivamo vrijednost data-id atributa user = el.dataset.user; dob = el.dataset.dateOfBirth; // Dobivamo vrijednost data-date-of-birth atributa el.dataset.ban = "Ne"; // Dodijeli novi atribut zabrane podataka i njegovu vrijednost console.log(user); // Ispis vrijednosti varijable korisniku konzole console.log(dob); // Ispis vrijednosti dob varijable na konzoli
Prvo, elementu dodajemo identifikator s jedinstvenom vrijednošću. Zatim pristupamo elementu preko getElementById. Sada možemo kontaktirati bilo koga atributi podataka putem metode skupa podataka, i ne samo primati, već i postavljati vrijednosti. Oni će biti pohranjeni dok se stranica ponovo ne učita ili dok se ne postavi nova vrijednost.
Još u danima XHTML/HTML4, programeri su imali samo nekoliko opcija koje su mogli koristiti za pohranjivanje proizvoljnih podataka vezanih za DOM. Mogli biste izmisliti svoje atribute, ali ovo je bilo rizično - vaš kod ne bi bio valjan, pretraživači bi mogli zanemariti vaše podatke i moglo bi uzrokovati probleme ako se ime podudara sa standardnim HTML atributima.
Stoga se većina programera držala atributa klase ili rel jer su oni bili jedini razuman način za pohranjivanje dodatnih redova. Na primjer, recimo da kreiramo widget za prikaz poruka kao što je vremenska linija Twitter poruka. U idealnom slučaju, JavaScript bi trebao biti konfigurabilan bez potrebe za ponovnim pisanjem koda, tako da definiramo korisnički ID u atributu klase, ovako:
Naš JavaScript kodće tražiti element sa ID msglist. Koristeći skriptu, tražit ćemo klase koje počinju sa user_ , a “bob” u našem slučaju će biti korisnički ID i prikazat ćemo sve poruke tog korisnika.
Recimo da bismo također željeli postaviti maksimalan broj poruka i preskočiti poruke starije od šest mjeseci (180 dana):
Naš atribut klase postaje zatrpan vrlo brzo - lakše je napraviti grešku, a raščlanjivanje stringova u JavaScript-u postaje sve teže.
HTML5 atributi podatakaSrećom, HTML5 je uveo mogućnost korištenja prilagođenih atributa. Možete koristiti bilo koje ime malog slova sa prefiksom data-, na primjer:
Prilagođeni atributi podataka:
- ovo su stringovi - u njih možete pohraniti bilo koju informaciju koja se može predstaviti ili kodirati kao string, kao što je JSON. Prebacivanje tipova mora biti obavljeno koristeći JavaScript
- treba koristiti u slučajevima kada nema odgovarajućih HTML5 elemenata ili atributa
- odnosi se samo na stranicu. Za razliku od mikroformata, eksterni sistemi ih moraju zanemariti, kao npr tražilice i roboti za pretragu
Svi pretraživači vam omogućavaju da dobijete i promijenite atribute podataka koristeći metode getAttribute i setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("data-list-size", +show+3);
Ovo radi, ali bi se trebalo koristiti samo za održavanje kompatibilnosti sa starijim pretraživačima.
Primjer br. 2 obrade u JavaScript-u: metoda data() jQuery bibliotekeOd jQueryja 1.4.3, data() metoda rukuje HTML5 atributima podataka. Ne morate eksplicitno specificirati data-prefiks, tako da će kod poput ovog funkcionirati:
Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("list-size", show+3);
Međutim, imajte na umu da jQuery pokušava pretvoriti vrijednosti takvih atributa u odgovarajuće tipove (boolean, brojevi, objekti, nizovi ili null) i da će utjecati na DOM. Za razliku od setAttribute, metoda data() neće fizički zamijeniti atribut data-list-size - ako provjerite njegovu vrijednost izvan jQueryja - i dalje će biti 5.
Primjer br. 3 JavaScript obrade: API za rad sa skupovima podatakaKonačno, imamo API za rad sa HTML5 skupovima podataka koji vraća DOMStringMap objekat. Važno je zapamtiti da se atributi podataka mapiraju u objekt bez prefiksa podataka, crtice se uklanjaju iz imena, a sama imena se pretvaraju u camelCase, na primjer:
| Ime atributa | Ime API skupa podataka |
| korisnik podataka | korisnik |
| data-maxage | maxage |
| data-list-size | listSize |
Naš novi kod:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Ovaj API podržavaju svi moderni pretraživači, ali ne IE10 i stariji. Za ove pretraživače postoji zaobilazno rešenje, ali je verovatno praktičnije koristiti jQuery ako pišete za starije pretraživače.
Da li ste se ikada zatekli da koristite nazive klasa elemenata ili atribute rel za pohranjivanje proizvoljnih isječaka metapodataka u jedinu svrhu da učinite svoj JavaScript jednostavnijim? Ako jeste, onda imam neke uzbudljive vijesti za tebe! Ako niste i razmišljate, Vau, to je odlična ideja! Preklinjem vas da se odmah oslobodite te misli i nastavite čitati.
Zahvaljujući HTML 5, sada imamo mogućnost da ugradimo prilagođene atribute podataka u sve HTML elemente. Ovi novi prilagođeni atributi podataka sastoje se od dva dijela:
Ime atributa Ime atributa podataka mora imati najmanje jedan znak i mora imati prefiks "data-". Ne smije sadržavati velika slova. Vrijednost atributa Vrijednost atributa može biti bilo koji niz.
Koristeći ovu sintaksu, možemo dodati podaci aplikacije na naše oznake kao što je prikazano u nastavku:
- Šargarepe
- Celer
- Rotkvice
Sada možemo koristiti ove pohranjene podatke u JavaScript-u naše stranice kako bismo stvorili bogatije i zanimljivije korisničko iskustvo. Zamislite da kada korisnik klikne na povrće, novi sloj se otvara u pretraživaču koji prikazuje dodatni razmak između sjemena i upute za sjetvu. Zahvaljujući atributima podataka koje smo dodali našim
Dodavanje prefiksa prilagođenim atributima sa podacima- osigurava da će ih korisnički agent potpuno zanemariti. Što se pretraživača i krajnjeg korisnika web stranice tiče, ovi podaci ne postoje.
Specifikacija kaže (naglasak naš):
Prilagođeni atributi podataka namijenjeni su pohranjivanju prilagođenih podataka privatno na stranici ili aplikaciji, za koje ne postoje prikladniji atributi ili elementi.
Ovi atributi nisu namijenjeni za korištenje od strane softvera koji je nezavisan od stranice koja koristi atribute.
Svaki HTML element može imati bilo koji broj specificiranih prilagođenih atributa podataka, sa bilo kojom vrijednošću.
W3C specifikacija Kako mogu koristiti atribute podataka?Kako su prilagođeni atributi podataka važeći HTML 5, mogu se koristiti u bilo kojem pretraživaču koji podržava HTML 5 tipove dokumenata. Srećom, ovo su skoro svi. Osim što pomaže kompatibilnosti unatrag, ovo također osigurava da će prilagođeni atributi podataka ostati skalabilno, višeplatformsko rješenje iu budućnosti.
Sada kada imamo široko razumijevanje o tome šta su atributi podataka, pogledajmo kako se oni mogu koristiti:
- Za pohranjivanje početne visine ili neprozirnosti elementa koji bi mogao biti potreban u kasnijim proračunima JavaScript animacije
- Za pohranjivanje parametara za Flash film koji je učitan putem JavaScripta
- Za pohranjivanje prilagođenih podataka za označavanje web analitike kao što je pokazao Jason Karns
- Za pohranjivanje podataka o zdravlju, municiji ili životima elementa u JavaScript igrici
- Za pokretanje dostupnih JavaScript titlova kao što je demonstrirao Bruce Lawson
Iako su fleksibilni, atributi podataka nisu odgovarajuće rješenje za sve probleme.
- Atributi podataka ne bi se trebali koristiti ako postoji postojeći atribut ili element koji je prikladniji za pohranjivanje vaših podataka. Na primjer, podaci o datumu/vremenu bi vjerojatno trebali biti prikazani semantički u elementu vremena umjesto da budu pohranjeni u prilagođenim atributima podataka.
- Prilagođeni atributi podataka nisu namijenjeni za natjecanje s mikroformatima. U specifikaciji je jasno navedeno da podaci nisu namijenjeni javnoj upotrebi. Eksterni softver ne bi trebao biti u interakciji s njim. Označavanje detalja o kontaktu ili detalja događaja korištenjem prilagođenih atributa podataka bilo bi pogrešno, osim ako je, naravno, namijenjeno samo za vaše interne skripte.
- Prisustvo/odsustvo određenog atributa podataka ne bi trebalo da se koristi kao CSS kuka za bilo koji stil. To bi značilo da su podaci koje pohranjujete od neposredne važnosti za korisnika i da ih treba označiti na semantičniji i pristupačniji način.
Sada kada razumemo šta su prilagođeni atributi podataka i kada ih možemo koristiti, verovatno bi trebalo da pogledamo kako možemo da komuniciramo sa njima koristeći JavaScript.
Ako želimo da dohvatimo ili ažuriramo ove atribute koristeći postojeći, izvorni JavaScript, onda to možemo učiniti pomoću metoda getAttribute i setAttribute kao što je prikazano u nastavku:
// "Dobivanje" data-atributa pomoću getAttribute var plant = document.getElementById("strawberry-plant"); var fruitCount = plant.getAttribute("data-fruit"); // fruitCount = "12" // "Podešavanje" data-atributa pomoću setAttribute plant.setAttribute("data-fruit","7"); // Pesky birds
Ova metoda će raditi u svim modernim pretraživačima, ali nije predviđeno da se koriste atributi podataka. Drugi (novi i poboljšani) način da se postigne ista stvar je pristup svojstvu skupa podataka elementa. Ovo svojstvo skupa podataka - dio novog HTML 5 JavaScript API-ja - vratit će objekt DOMStringMap svih atributa podataka odabranog elementa. Kada koristite ovaj pristup, umjesto da koristite puno ime atributa, možete odbaciti prefiks data- i uputite se na prilagođene podatke direktno koristeći ime koje ste im dodijelili Imena atributa podataka koja sadrže crtice će biti uklonjena od crtica i konvertovana u CamelCase .
// "Dobivanje" data-atributa pomoću skupa podataka var plant = document.getElementById("suncokret"); var leaves = plant.dataset.leaves; // listovi = 47; // "Postavljanje" atributa podataka pomoću skupa podataka var height = plant.dataset.plantHeight; // "plant-height" -> "plantHeight" plant.dataset.plantHeight = "3.6m"; // Đubrivo za kreking
Ako, u nekom trenutku u vašoj skripti, određeni atribut podataka postane suvišan i više nije potreban, moguće je i potpuno ukloniti taj atribut iz DOM elementa tako što ćete ga postaviti na vrijednost null.
Plant.dataset.leaves = null; // Gusjenice napadaju!
Nažalost, novo svojstvo skupa podataka još nije implementirano ni u jednom pregledniku, pa je u međuvremenu najbolje koristiti getAttribute i setAttribute kao što je ranije prikazano.
Dok razvijate svoju aplikaciju, možda će vam biti korisno moći odabrati elemente na osnovu prisutnosti - ili zaista specifičnih vrijednosti - njihovih prilagođenih atributa podataka. Ovo se može postići brzo i lako pomoću querySelectorAll kao što je prikazano u nastavku:
// Odaberite sve elemente s atributom "procvjetanje podataka" document.querySelectorAll(""); // Odaberite sve elemente sa crvenim listovima document.querySelectorAll("");
Reč upozorenjaKako se atributi podataka sve više koriste, potencijal za sukobe u konvencijama imenovanja postaje mnogo veći. Ako koristite nemaštovito ime atributa kao što je data-height , onda je vjerovatno da ćete na kraju naići na biblioteku ili dodatak koji koristi isto ime atributa. Više skripti dobijanje i postavljanje zajedničkog data-atributa će vjerovatno uzrokovati haos. Kako bi se to izbjeglo, ohrabrujem ljude da odaberu standardni niz (možda naziv stranice/dodatka) za prefiks svih njihovih atributa podataka - npr. data-html5doctor-height ili data-my-plugin-height .
SažetakPrilagođeni atributi podataka su odličan način da pojednostavite skladištenje podataka aplikacije na vašim web stranicama. Iako još ne možete koristiti nove JavaScript API-je, možete uživati u velikom uspjehu koristeći getAttribute i setAttribute sigurni da će raditi u svim glavnim pretraživačima.
ZadaćaAko ste jako željni da se poigrate s novim svojstvom skupa podataka, ali ste razočarani što nije implementirano, ne bojte se!, jer postoji svjetlo na kraju tunela. Možda ćete biti zainteresirani da pogledate eksperimentalni kod dr Remyja, koji djelomično omogućava funkcionalnost skupa podataka u nekim pretraživačima uređivanjem Element.prototype.
Kod podržava preuzimanje atributa podataka u najnovijim verzijama Firefoxa, Safarija, Opera i Chrome-a, ali nažalost neće raditi ni u jednoj verziji IE-a (pošto IE ne izlaže objekt Element). Ovaj kod također djelomično podržava postavljanje atributa podataka, ali će samo pohraniti nove vrijednosti atributa unutar JavaScripta i neće ažurirati DOM element kao što bi to učinila potpuna, izvorna implementacija svojstva skupa podataka. Iako je ovaj kod uglavnom dokaz koncepta, može biti koristan za razvoj mobilnih aplikacija ili intraneta u zatvorenim okruženjima gdje kompatibilnost među pretraživačima (IE) nije problem.
- Kategorija
Čvrsto ne vidim zašto je neprikladno koristiti prilagođene atribute podataka za vanjske aplikacije pod uvjetom da te vanjske aplikacije nisu uvjet za gledanje stranice.
Ne razumijem zašto ovaj članak citira dio specifikacije u kojem se kaže da su atributi data-* specifični za web lokaciju, a zatim daje upozorenje koje promiče razmak imena. Ako slijedite specifikacije, vi stvarate sve imena atributa, tako da nema razloga za razmak između imena. To je tačno zašto to je u specifikaciji.
@Scott – razmak imena nije stvaranje atributa podataka „specifičnih za lokaciju“, već razmak imena u aplikaciji.
Na primjer (a IIRC specifikacija to spominje) kontrole widgeta (kao što je prikaz stabla) mogu imati atribute podataka, ali atributi podataka mogu biti kreirani pomoću određene biblioteke, kao što je jQuery ili Dojo – tako da se izbjegnu kolizije atributa podataka, aplikacijski modul će možda htjeti da ga imenski prostor.
Ne mogu vidjeti gdje je Chris pomenuo atribut podataka koji je specifičan za web lokaciju (ali je kasno i možda sam ga propustio).
Postoji mnogo slučajeva u kojima nećete htjeti ili trebate koristiti razmak imena, ali postoje slučajevi u kojima to ima smisla. Ali budući da se ovo samo nadovezuje na postojeća pravila o atributima sadržaja - slobodni ste odlučiti kako ćete ih koristiti.
Koristim data-* sa getAttribute i setAttribute pošto sam prije 2 godine vidio objavu Jona Resiga o tome, tako da mogu potvrditi da ovaj način korištenja funkcionira za sve pretraživače/platforme, počevši od IE6.
Samo se nadam da bilo koji preglednik koji implementira data-* izvorno neće slomiti getAttribute metodu (ne bi trebao, ali nikad ne znamo)
Sa stanovišta performansi, pristup DOM-u putem getAttribute() je očito sporiji od pristupa JS varijabli, događaju pohranjenom u nizu, tako da slučaj upotrebe JS igre koji je koristi za spremanje vrijednosti vjerojatno nikada neće biti desiti se: programeri će ga koristiti za prijenos informacija sa servera na klijenta, ali kada se DOM prikupi, najbolje je zadržati sve vrijednosti u JS-u radi bržeg pristupa
@jpvincent – Da, potpuno se slažem s tobom.
Pretpostavljam da bi se početni podaci o zdravlju i municiji mogli pohraniti u bazu podataka i da bi korištenje data-atributa bio valjan mehanizam za prijenos ovih informacija u javascript igre. Ali kada se ovaj zadatak inicijalizacije završi, nema smisla nastaviti sa skupim ažuriranjima DOM-a s najnovijim statistikama zdravlja/streljiva.
Hvala na komentaru.
Vaš članak spominje da ne biste trebali koristiti data-* za CSS kuke. Šta ako se atribut data-* koristi u JS-u, ali na njega također želite primijeniti stilove. Zar ne bi imalo smisla ciljati atribut umjesto dodavanja sekundarne klase.
Uzmite ovaj obrazac za primjer:
Naslov * je obavezan
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
data-field_type=”text” se može koristiti i za validaciju i za stilizovanje.
Prilično cool funkcija, iako je još nijedan pretraživač ne podržava. Ovo malo koda radi na dodavanju podrške za svojstvo skupa podataka svakom pretraživaču koji podržava __defineGetter__. Napisao sam ga prije nego što sam shvatio da ste povezali neki kod koji radi otprilike istu stvar. Moj kod, s druge strane, ima podršku za stvarno ažuriranje vrijednosti atributa, ali ne podržava dodavanje novih atributa.
Element.prototype.__defineGetter__('set podataka', function())(
var skup podataka = ();
for (var i=0, l=this.attributes.length; i<
/
div
>
Kao što vidite, možete odrediti bilo koja imena i bilo koje vrijednosti. Ali ovi parametri ne rade ništa s elementom, pa zašto su uopće potrebni? Postoji barem nekoliko načina za korištenje atributa podataka u izgradnji web stranice i pogledajmo ih.
Način primjene 1 – pristup elementima u cssAko znate koji su selektori atributa, vjerovatno već možete pretpostaviti kako se nove funkcije mogu koristiti. Određivanjem jedinstvenog atributa podataka za oznaku, možete je na odgovarajući način referirati u stilovima. Pogledajmo primjer:
div()
< div data - css = "css" > < / div > div [data - css = "css" ] ( ) |
To nam je omogućilo pristup elementu bez korištenja stilskih klasa. Međutim, ako razmišljate o tome na ovaj način, onda to ne pruža nikakvu posebnu prednost; da biste se pozvali na klasu, morate učiniti približno iste korake. Dakle, jednostavno imate proširene mogućnosti za selektore i ništa više.
Metoda primjene 2 - pohranjivanje vrijednosti i njihovo korištenjeNa prvi pogled, vrijednosti atributa podataka ne mijenjaju ništa i uopće ne utječu na web stranicu. Pa zašto su oni uopšte potrebni? U stvari, možete im pronaći upotrebu ako se sjetite funkcije attr() u css-u.
< img src = "foto.jpg" data - img = "Фотография" > |
Postavimo zadatak: trebamo prikazati tekst objašnjenja za fotografije na stranici, koji bi se pojavio ili odmah kada se slika učita, ili kada pređete preko nje, nije bitno na koji način. Standardni opis alata implementiran je pomoću atributa title.
Ali takav nagovještaj vas možda neće zadovoljiti u mnogim aspektima. Prvo, izgleda glatko (što nije uvijek potrebno). Drugo, nestaje nakon nekog vremena. Treće, pojavljuje se na različitim mjestima, ovisno o tome gdje je kursor postavljen. Pa, najveći problem je što ne možemo ni na koji način stilizirati naš tooltip – uvijek će to biti crni tekst na bijeloj pozadini, što nije baš zanimljivo.
Dakle, iznad u kod smo ubacili sliku, naznačili put do nje i dodatno zapisali proizvoljni parametar podataka. Sada možete implementirati izlaz objašnjenja za fotografiju na ovaj način:
img( display: inline-block; ) img:after( content: attr(data-img); )
img ( displej: inline - blok; img:after( sadržaj : attr (podaci - img ) ; |
Šta smo uradili? Sada će sve slike imati pseudo-element koji sadrži vrijednost data-img atributa, ako ga ima oznaka img. Na ovaj jednostavan način ste bili u mogućnosti da prikažete tekst objašnjenja za fotografiju.
U ovom članku neću dati upute o tome kako kreirati nagovještaj. Samo da kažem da će se po defaultu prikazati nakon što se stranica učita. Često je potrebno u početku sakriti i prikazati kada pređete preko slike. Da biste ovo implementirali, trebate koristiti selektor img:hover:after.
Pa, koji drugi html5 atributi postoje koji se pojavljuju samo u ovoj specifikaciji? To uključuje, na primjer, kontrole – atribut za nove audio i video elemente, koji vam omogućava da prikažete kontrole za video ili audio snimak.
Za video, koristeći parametar postera, možete odrediti putanju do slike koja će služiti kao pozadina prije nego počnete gledati video. Općenito, pojavilo se dosta ovih malih atributa.
Također, pojedinačni ulazni element sada ima puno novih parametara. Sada možete kreirati polja za unos Email, telefon, odabir datuma ili vremena u kalendaru, polje za odabir boje itd. Prazan atribut obavezan čini da se svako polje popuni; ako se to ne uradi, pretraživač jednostavno neće dozvoliti slanje obrasca.
Naravno, jedini nedostatak svih ovih inovacija je to što nisu svugdje pravilno podržane. Dakle, dok nove funkcije rade odlično u jednom pretraživaču i korisnici mogu koristiti nova polja, stvari mogu biti drugačije u drugom web pretraživaču. Naravno, sami korisnici su dijelom krivi što nisu ažurirali softver, ali morate pratiti i šta je i kako podržano. IN
