Vlad Merzhevich
Ono što je jako nedostajalo u HTML-u 4 bila je mogućnost stvaranja vlastitih atributa za pohranu vrijednosti. Zašto je to potrebno? Evo nekoliko zadataka kod kojih bi to moglo biti potrebno.
- Stvaranje opisa alata bez korištenja skripti.
- Odredite stil elementa na temelju vrijednosti atributa.
- Primanje i mijenjanje 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 s podacima-;
- koristimo samo slova, crtica (-), dvotočka (:) i podvlaka (_).
CSS i JavaScript malo drugačije pristupaju ovim atributima, pa pogledajmo primjere za njih zasebno.
CSSCSS ima atribute oznake; ako postoji bilo koji atribut ili zadana vrijednost, postavljamo traženi stil.
Sadržaj
Sada možemo oblikovati ovaj element kao div i postaviti ga na potreban dizajn. Općenito, ovo je slično načinu rada klasa, tako da nije jedinstvena ili neophodna značajka. Stoga je korisnije postaviti vrijednosti.
Sadržaj
U CSS-u tada možemo postaviti različite stilove za različite vrijednosti naših atributa stupaca podataka.
Div (širina: 480 px; ) div (širina: 720 px; )
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 primjena je uključivanje funkcije attr(). Dobiva vrijednost zadanog atributa i umeće je u stil. Praktično je koristiti ovo za izradu opisa alata. Tekst pišemo izravno unutar elementa i implementiramo prikaz i dizajn tooltip-a pomoću CSS-a.
Mjerač opisa alata (položaj: relativan; ) metar:hover::after ( sadržaj: attr(data-description); pozadina: #ffe; padding: 5px; obrub: 1px solid #666; položaj: apsolutni; vrh: 20px; )
Temperatura vode
U ovom primjeru, atribut opisa podataka dodaje se elementu koji sadrži potreban tekst za prikaz. Sam prikaz se događa pomoću pseudoelementa ::after i svojstva sadržaja, čija je vrijednost funkcija attr().
JavaScriptAko u CSS-u nazivu atributa pristupamo izravno, navodeći ga u cijelosti, onda se u JavaScriptu to radi putem metode skupa podataka. Sam naziv atributa pretvara se u varijablu prema sljedećim pravilima:
- podaci- odbačeni;
- svaka crtica koja prethodi slovu se odbacuje, a slovo iza njega postaje veliko.
U praksi to izgleda ovako.
podatak-opis prelazi 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("korisnik"); id = el.dataset.id; // Dobivanje vrijednosti data-id atributa user = el.dataset.user; dob = el.dataset.dateOfBirth; // Dobivanje vrijednosti atributa data-date-of-birth el.dataset.ban = "No"; // Dodjela novog data-ban atributa i njegove vrijednosti console.log(user); // Ispis vrijednosti varijable korisniku konzole console.log(dob); // Ispis vrijednosti dob varijable na konzolu
Prvo elementu dodajemo identifikator s jedinstvenom vrijednošću. Tada pristupamo elementu preko getElementById. Sada možemo kontaktirati bilo koga atributi podataka putem metode skupa podataka, i ne samo primati, već i postavljati vrijednosti. One će biti pohranjene dok se stranica ponovno ne učita ili dok se ne postavi nova vrijednost.
Davno u danima XHTML/HTML4, programeri su imali samo nekoliko opcija koje su mogli koristiti za pohranu proizvoljnih podataka povezanih s DOM-om. Mogli ste izmisliti vlastite atribute, ali to je bilo riskantno - vaš kôd ne bi bio valjan, preglednici bi mogli zanemariti vaše podatke i moglo bi uzrokovati probleme ako naziv odgovara standardnim HTML atributima.
Stoga se većina programera držala atributa class ili rel jer su oni bili jedini razuman način za pohranu dodatnih redaka. Na primjer, recimo da stvaramo widget za prikaz poruka poput vremenske crte poruka na Twitteru. U idealnom slučaju, JavaScript bi se trebao moći konfigurirati bez potrebe za prepisivanjem koda, tako da definiramo ID korisnika u atributu klase, ovako:
Naše JavaScript kod tražit će element s ID-om msglist. Pomoću skripte tražit ćemo klase koje počinju s user_, a “bob” će u našem slučaju biti ID korisnika, te ćemo prikazati sve poruke tog korisnika.
Recimo da također želimo postaviti maksimalan broj poruka i preskočiti poruke starije od šest mjeseci (180 dana):
Naš atribut klase postaje vrlo brzo zatrpan - lakše je pogriješiti, a raščlanjivanje nizova u JavaScriptu postaje sve teže.
HTML5 atributi podatakaSrećom, HTML5 je uveo mogućnost korištenja prilagođenih atributa. Možete koristiti bilo koji naziv malim slovima s prefiksom data-, na primjer:
Prilagođeni atributi podataka:
- ovo su nizovi - u njih možete pohraniti bilo koju informaciju koja se može predstaviti ili kodirati kao niz, kao što je JSON. Prebacivanje tipa mora se izvršiti pomoću JavaScripta
- treba koristiti u slučajevima kada nema odgovarajućih HTML5 elemenata ili atributa
- odnose se samo na stranicu. Za razliku od mikroformata, vanjski sustavi ih moraju ignorirati, kao npr tražilice i roboti za pretraživanje
Svi vam preglednici omogućuju dobivanje i promjenu atributa podataka pomoću metoda getAttribute i setAttribute:
Var msglist = document.getElementById("msglist"); var show = msglist.getAttribute("data-list-size"); msglist.setAttribute("veličina-popisa-podataka", +show+3);
Ovo radi, ali bi se trebalo koristiti samo za održavanje kompatibilnosti sa starijim preglednicima.
Primjer br. 2 obrade u JavaScriptu: metoda data() biblioteke jQueryOd jQuery 1.4.3, data() metoda rukuje HTML5 atributima podataka. Ne morate eksplicitno navesti data- prefiks, tako da će kod kao što je ovaj funkcionirati:
Var msglist = $("#msglist"); var show = msglist.data("veličina popisa"); msglist.data("veličina popisa", prikaži+3);
Međutim, imajte na umu da jQuery pokušava pretvoriti vrijednosti takvih atributa u odgovarajuće tipove (booleove vrijednosti, brojeve, objekte, nizove 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 s HTML5 skupovima podataka koji vraća objekt DOMStringMap. Važno je zapamtiti da se atributi podataka preslikavaju na objekt bez prefiksa podataka, crtice se uklanjaju iz imena, a sama imena se pretvaraju u velika i mala slova, na primjer:
| Naziv atributa | Naziv API skupa podataka |
| korisnik podataka | korisnik |
| data-maxage | maxage |
| veličina-popisa-podataka | veličina liste |
Naš novi kod:
Var msglist = document.getElementById("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = +show+3;
Ovaj API podržavaju svi moderni preglednici, ali ne IE10 i stariji. Postoji zaobilazno rješenje za ove preglednike, ali vjerojatno je praktičnije koristiti jQuery ako pišete za starije preglednike.
Jeste li se ikada našli kako upotrebljavate nazive klasa elemenata ili rel atribute za pohranjivanje proizvoljnih isječaka metapodataka samo u svrhu pojednostavljenja vašeg JavaScripta? Ako jeste, onda imam neke uzbudljive vijesti za tebe! Ako niste i mislite, Vau, to je sjajna ideja! Preklinjem vas da se odmah oslobodite te misli i nastavite čitati.
Zahvaljujući HTML 5, sada imamo mogućnost ugradnje prilagođenih atributa podataka u sve HTML elemente. Ovi novi prilagođeni atributi podataka sastoje se od dva dijela:
Naziv atributa Naziv atributa podataka mora imati najmanje jedan znak i mora imati prefiks "podaci-". Ne smije sadržavati nikakva velika slova. Vrijednost atributa Vrijednost atributa može biti bilo koji niz.
Koristeći ovu sintaksu, možemo dodati podaci o aplikaciji našim oznakama kao što je prikazano u nastavku:
- mrkva
- Celer
- rotkvice
Sada možemo koristiti ove pohranjene podatke u JavaScript-u naše web-lokacije za stvaranje bogatijeg i zanimljivijeg korisničkog iskustva. Zamislite da kada korisnik klikne na povrće, u pregledniku se otvori novi sloj koji prikazuje dodatni razmak sjemena i upute za sjetvu. Zahvaljujući data- atributima koje smo dodali našim
Prefiksiranje prilagođenih atributa s podacima osigurava da će ih korisnički agent potpuno zanemariti. Što se tiče preglednika i zapravo krajnjeg korisnika web stranice, ti podaci ne postoje.
Specifikacija kaže (naglasak je naš):
Atributi prilagođenih podataka namijenjeni su pohranjivanju prilagođenih podataka privatnih za stranicu ili aplikaciju, za koje više nema prikladnih atributa ili elemenata.
Ovi atributi nisu namijenjeni za korištenje od strane softvera koji je neovisan o web mjestu koje koristi atribute.
Svaki HTML element može imati bilo koji broj navedenih atributa prilagođenih podataka, s bilo kojom vrijednošću.
W3C specifikacija Kako mogu koristiti atribute podataka?Budući da su prilagođeni atributi podataka valjani HTML 5, mogu se koristiti u bilo kojem pregledniku koji podržava HTML 5 tipove dokumenata. Srećom, ovo su uglavnom svi. Uz pomoć unatrag kompatibilnosti, ovo također osigurava da će prilagođeni atributi podataka ostati skalabilno, višeplatformsko rješenje iu budućnosti.
Sada kada imamo široko razumijevanje što su atributi podataka, pogledajmo kako se mogu koristiti:
- Za pohranjivanje početne visine ili neprozirnosti elementa koji bi mogli biti potrebni u kasnijim izračunima JavaScript animacije
- Za pohranjivanje parametara za Flash film koji se učitava putem JavaScripta
- Za pohranu prilagođenih podataka označavanja web analitike kao što je pokazao Jason Karns
- Za pohranu podataka o zdravlju, municiji ili životima elementa u JavaScript igri
- Omogućiti pristupačne JavaScript titlove kako je pokazao Bruce Lawson
Iako fleksibilni, atributi podataka nisu prikladno rješenje za sve probleme.
- Atributi podataka ne bi se trebali koristiti ako postoji postojeći atribut ili element koji je prikladniji za pohranu vaših podataka. Na primjer, podaci o datumu/vremenu vjerojatno bi trebali biti predstavljeni semantički u vremenskom elementu umjesto da budu pohranjeni u prilagođenim atributima podataka.
- Prilagođeni atributi podataka nisu namijenjeni natjecanju s mikroformatima. U specifikaciji je jasno navedeno da podaci nisu namijenjeni za javnu upotrebu. Vanjski softver ne bi trebao komunicirati s njim. Označavanje pojedinosti o kontaktu ili pojedinosti o događaju korištenjem prilagođenih atributa podataka bilo bi pogrešno, osim ako, naravno, nije namijenjeno za korištenje samo vašim internim skriptama.
- Prisutnost/odsutnost određenog atributa podataka ne bi se trebala koristiti kao CSS kuka za bilo koji stil. To znači 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 razumijemo što su prilagođeni atributi podataka i kada ih možemo koristiti, vjerojatno bismo trebali pogledati kako možemo komunicirati s njima pomoću JavaScripta.
Ako želimo dohvatiti ili ažurirati ove atribute pomoću postojećeg izvornog JavaScripta, tada to možemo učiniti pomoću metoda getAttribute i setAttribute kao što je prikazano u nastavku:
// "Dobijanje" data-atributa pomoću getAttribute var plant = document.getElementById("strawberry-plant"); var fruitCount = plant.getAttribute("data-fruit"); // fruitCount = "12" // "Postavljanje" data-atributa pomoću setAttribute plant.setAttribute("data-fruit","7"); // Dosadne ptice
Ova će metoda raditi u svim modernim preglednicima, ali to nije način na koji se atributi podataka namjeravaju koristiti. Drugi (novi i poboljšani) način da se postigne ista stvar je pristup svojstvu skupa podataka elementa. Ovo svojstvo skupa podataka - dio novih HTML 5 JavaScript API-ja - vratit će objekt DOMStringMap svih atributa podataka odabranog elementa. Kada koristite ovaj pristup, umjesto korištenja punog naziva atributa, možete odbaciti prefiks podataka i uputite na prilagođene podatke izravno koristeći naziv koji ste im dodijelili. Imena atributa podataka koja sadrže crtice bit će ogoljena od svojih crtica i pretvorena u CamelCase.
// "Dobijanje" data-atributa pomoću skupa podataka var plant = document.getElementById("suncokret"); var leaves = plant.dataset.leaves; // listovi = 47; // "Postavljanje" data-atributa pomoću skupa podataka var height = plant.dataset.plantHeight; // "visina-biljke" -> "visina biljke" plant.dataset.plantHeight = "3.6m"; // Gnojivo za pucanje
Ako, u nekom trenutku u vašoj skripti, određeni atribut podataka postane suvišan i više nije potreban, također je moguće potpuno ukloniti taj atribut iz DOM elementa postavljanjem 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 pokazano.
Dok razvijate svoju aplikaciju, možda će vam biti korisno moći odabrati elemente na temelju prisutnosti - ili zapravo specifičnih vrijednosti - njihovih prilagođenih atributa podataka. To se može postići brzo i jednostavno korištenjem querySelectorAll kao što je prikazano u nastavku:
// Odaberite sve elemente s "data-flowering" atributom document.querySelectorAll(""); // Odaberite sve elemente s crvenim lišćem document.querySelectorAll("");
Riječ upozorenjaKako se atributi podataka sve više koriste, potencijal za sukobe u konvencijama imenovanja postaje puno veći. Ako koristite nemaštovito ime atributa kao što je data-height, tada je vjerojatno da ćete na kraju naići na biblioteku ili dodatak koji koristi isti naziv atributa. Višestruke skripte koje dobivaju i postavljaju zajednički atribut podataka vjerojatno će izazvati kaos. Kako bi se to izbjeglo, potičem ljude da odaberu standardni niz (možda naziv web-mjesta/dodatka) za prefiks svih svojih atributa podataka - npr. data-html5doctor-height ili data-my-plugin-height .
SažetakPrilagođeni podaci-atributi izvrstan su način da pojednostavite pohranu 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 znajući da će raditi u svim glavnim preglednicima.
Domaća zadaćaAko ste jako zainteresirani za igru s novim svojstvom skupa podataka, ali ste razočarani što nije implementirano, ne bojte se!, jer postoji svjetlo na kraju tunela. Možda će vas zanimati eksperimentalni kod dr. Remyja, koji djelomično omogućuje funkcionalnost skupa podataka u nekim preglednicima uređivanjem Element.prototype.
Kod podržava dohvaćanje atributa podataka u najnovijim verzijama Firefoxa, Safarija, Opere i Chromea, ali nažalost neće raditi ni u jednoj verziji IE-a (budući da 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 s više preglednika (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 pregledavanje stranice.
Ne razumijem zašto ovaj članak citira dio specifikacije u kojem se kaže da su data-* atributi specifični za web mjesto, a zatim daje upozorenje promovirajući prostor imena. Ako slijedite specifikaciju, vi stvarate svi imena atributa, tako da nema razloga za prostor imena. Točno tako zašto to je u specifikaciji.
@Scott – razmak imena nije za stvaranje atributa podataka "specifičnih za web mjesto", već razmak imena unutar aplikacije.
Na primjer (i specifikacija IIRC-a to spominje) kontrole widgeta (kao što je prikaz stabla) mogu imati atribute podataka, ali atributi podataka mogu biti stvoreni korištenjem određene biblioteke, kao što je jQuery ili Dojo – kako biste izbjegli kolizije atributa podataka, aplikacijski modul možda će htjeti to imenski prostor.
Ne vidim gdje je Chris rekao da je atribut podataka specifičan za web mjesto (ali kasno je i možda sam to propustio).
Postoji mnogo slučajeva u kojima nećete željeti ili trebati koristiti razmak imena, ali postoje neki 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-* s getAttribute i setAttribute jer sam prije 2 godine vidio post o tome od Jona Resiga, tako da mogu potvrditi da ovaj način korištenja funkcionira za sve preglednike/platforme, počevši od IE6.
Samo se nadam da bilo koji preglednik koji nativno implementira data-* neće pokvariti metodu getAttribute (ne bi trebao, ali nikad se ne zna)
Sa stajališta performansi, pristup DOM-u putem getAttribute() očito je sporiji od pristupa JS varijabli, događaju pohranjenom u nizu, tako da slučaj upotrebe koji dajete JS igri koja ga koristi za pohranjivanje vrijednosti vjerojatno nikada neće dogoditi: programeri će ga koristiti za prijenos informacija s poslužitelja na klijenta, ali nakon što se DOM skupi, najbolje je zadržati sve vrijednosti u JS-u radi bržeg pristupa
@jpvincent – Da, u potpunosti se slažem s tobom.
Pretpostavljam da bi se početni podaci o zdravlju i streljivu mogli pohraniti u bazu podataka, a korištenje data-atributa bi bio valjan mehanizam za prijenos ovih informacija u javascript igre. Ali kada se ovaj zadatak inicijalizacije dovrši, nema smisla nastaviti s izradom skupih ažuriranja DOM-a s najnovijim statistikama zdravlja/streljiva.
hvala na komentaru
Vaš članak spominje da ne biste trebali koristiti data-* za CSS kuke. Što ako je data-* atribut korišten u JS-u, ali ste također htjeli primijeniti stilove na njega. Ne bi li imalo smisla ciljati atribut umjesto dodavanja sekundarne klase.
Uzmimo ovaj obrazac za primjer:
Naslov *je obavezan
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
data-field_type=”text” može se koristiti i za provjeru valjanosti i za stilski izgled.
Prilično cool značajka, iako je još nijedan preglednik ne podržava. Ovaj mali dio koda radi na dodavanju podrške za svojstvo skupa podataka svakom pregledniku koji podržava __defineGetter__. Napisao sam to prije nego sam shvatio da si povezao neki kod koji radi skoro 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__('dataset', function())(
var skup podataka = ();
za (var i=0, l=this.attributes.length; i<
/
div
>
Kao što vidite, možete navesti bilo koja imena i bilo koje vrijednosti. Ali ti 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 izradi web stranica, a pogledajmo ih.
Metoda primjene 1 – pristup elementima u css-uAko znate što su selektori atributa, vjerojatno već možete pogoditi kako se nove značajke mogu koristiti. Određivanjem jedinstvenog podatkovnog atributa za oznaku, možete ga prikladno pozvati u stilovima. Pogledajmo primjer:
div()
< div data - css = "css" > < / div > div [podaci - css = "css" ] ( ) |
To nam je omogućilo pristup elementu bez korištenja stilskih klasa. Međutim, ako o tome razmišljate na ovaj način, onda to ne daje nikakvu posebnu prednost; da biste se pozvali na klasu, morate učiniti približno iste korake. Dakle, jednostavno imate proširene mogućnosti selektora 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 uopće potrebni? Zapravo, možete im pronaći primjenu ako se sjetite funkcije attr() u css-u.
< img src = "foto.jpg" data - img = "Фотография" > |
Postavimo zadatak: moramo prikazati tekst objašnjenja za fotografije na stranici, koji bi se pojavio ili odmah kada se slika učita, ili kada lebdite iznad nje, nije važno na koji način. Standardni opis alata implementiran je pomoću atributa naslova.
Ali takav vam savjet možda neće zadovoljiti u mnogim aspektima. Prvo, pojavljuje se glatko (što nije uvijek potrebno). Drugo, nestaje nakon nekog vremena. Treće, pojavljuje se na različitim mjestima, ovisno o tome gdje je pokazivač postavljen. Pa, najveći problem je što ne možemo ni na koji način stilizirati naš tooltip - to će uvijek biti crni tekst na bijeloj pozadini, što nije baš zanimljivo.
Dakle, iznad u kodu smo umetnuli 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( prikaz: inline - blok; img:nakon( sadržaj: attr (podaci - img); |
Što smo učinili? Sada će sve slike imati pseudoelement koji sadrži vrijednost atributa data-img, ako ga oznaka img ima. Na ovaj jednostavan način mogli ste prikazati tekst objašnjenja za fotografiju.
U ovom članku neću dati upute o tome kako stvoriti savjet. Samo da kažem da će prema zadanim postavkama biti prikazan nakon učitavanja stranice. Često je potrebno u početku sakriti i prikazati kada lebdite iznad slike. Da biste to implementirali, trebate koristiti selektor img:hover:after.
Pa, koji su drugi html5 atributi prisutni samo u ovoj specifikaciji? To uključuje, na primjer, kontrole – atribut za nove audio i video elemente, koji vam omogućuje prikaz kontrola za video ili audio snimku.
Za video, pomoću parametra poster, možete odrediti put do slike koja će služiti kao pozadina prije nego počnete gledati video. Općenito, pojavilo se dosta tih malih atributa.
Također, pojedinačni ulazni element sada ima mnogo novih parametara. Sada možete kreirati polja za unos E-mail, telefon, odabir datuma ili vremena u kalendaru, polje za odabir boje itd. Prazan obavezni atribut zahtijeva popunjavanje svih polja; ako to nije učinjeno, preglednik jednostavno neće dopustiti slanje obrasca.
Naravno, jedini nedostatak svih ovih inovacija je što nisu svugdje pravilno podržane. Dakle, dok nove značajke rade odlično u jednom pregledniku i korisnici mogu koristiti nova polja, stvari mogu biti drugačije u drugom web pregledniku. Naravno, dio krivice za neažuriranje softvera snose i sami korisnici, ali treba pratiti što je i kako podržano. U
