Vlad Merzhevich
HTML 4 je jako nedostajala mogućnost kreiranja vlastitih atributa za pohranjivanje vrijednosti. Zašto je ovo potrebno? Evo nekoliko zadataka gdje bi vam mogao zatrebati.
- Kreiranje tooltipova bez skriptiranja.
- Određivanje stila elementa na osnovu vrijednosti atributa.
- Dobijanje i mijenjanje vrijednosti putem skripti.
HTML5 uvodi novi generički atribut koji možete dodati bilo kojoj oznaci. Pravila za pisanje atributa su jednostavna:
- uvijek počnite s podacima-;
- koristimo samo latinična slova, crticu (-), dvotočku (:) i donju crtu (_).
CSS i JavaScript se malo drugačije odnose na takve atribute, pa pogledajmo primjere za njih zasebno.
CSS
U CSS-u postoje atributi oznaka, ako postoji neki atribut ili zadana vrijednost, postavljamo traženi stil.
Sada, u stilovima, možemo nazvati ovaj element kao div i postaviti željeni dizajn za njega. Općenito, to liči na način na koji klase rade, tako da nije jedinstvena ili neophodna karakteristika. Stoga je korisnije postaviti vrijednosti.
U CSS-u, nakon toga možemo postaviti drugačiji stil za različite vrijednosti našeg atributa data-columns.
Div (širina: 480px;) div (širina: 720px;)
Opet, ovo je donekle zamjena za klase, jer vas ništa ne sprječava da napravite klase s imenima stupac-2, stupac-3 i dodate ih ako je potrebno.
Ljepši slučaj upotrebe je uključivanje funkcije 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.
Temperatura vode
U ovom primjeru, elementu
JavaScript
Ako se u CSS-u direktno pozivamo na ime atributa, navodeći ga u potpunosti, onda se u JavaScript-u to radi preko skupa podataka. Samo ime atributa se pretvara u varijablu prema sljedećim pravilima:
- podaci- se odbacuju;
- svaka crtica koja prethodi slovu se odbacuje, a slovo iza njega je veliko.
U praksi to izgleda ovako.
podaci-opis postaje opis.
data-full-description postaje fullDescription.
data-description-of-tag postaje descriptionOfTag.
Tradicionalni način pristupa elementu i njegovim atributima je postavljanje identifikatora i upućivanje na element preko getElementById, kao što je prikazano u primjeru ispod.
Prvo, elementu dodajemo identifikator s jedinstvenom vrijednošću. Zatim pristupamo elementu preko getElementById. Sada možemo pristupiti bilo kojim atributima podataka putem metode skupa podataka, i ne samo dobiti, već i postaviti vrijednosti. Oni će biti pohranjeni dok se stranica ponovo ne učita ili dok se ne postavi nova vrijednost.
Prije stvaranja HTML5, rad sa atributima u HTML elementima, blago rečeno, nije bio zadovoljstvo. Morao sam koristiti atribute poput rel ili class. Neki programeri su čak kreirali svoje atribute.
Ali stvari su se dramatično promijenile kada nam je HTML5 pružio mogućnost korištenja njihovih atributa podataka. Sada je prilično lako spremiti dodatne podatke standardnim sredstvima.
Kako funkcionišu atributi datuma?
Ime govori za sebe. Atributi datuma pohranjuju neke podatke koje navedete. Uvek počinju sa prefiksom podataka- i završavaju nečim razumljivijim za programera (prema specifikaciji, dozvoljeni su samo mala slova i crtice). Element može sadržavati bilo koji broj atributa datuma.
Primjer korištenja atributa za pohranjivanje korisničkih podataka:
Naravno, ovi podaci ne pomažu previše krajnjem korisniku, jer ih on jednostavno ne vidi, ali atributi datuma se vrlo široko koriste u modernim web tehnologijama.
Evo primjera dugmeta za brisanje nečega na vašoj stranici:
Svi potrebni parametri su vam na dohvat ruke i spremni za slanje u backend skriptu. Nema više rel atributa ili rukovanja ID-om ili potrebne radnje iz drugih atributa.
Šta se može pohraniti?
Vrijedi zapamtiti samo jedno pravilo, objekti se ne mogu pohraniti u atribute datuma. To jest, možete, ako ih prethodno serijalizirate. Za sada, samo zapamtite da, u principu, možete pohraniti samo string podatke.
Čitanje / pisanje atributa pomoću javascripta
Vratimo se na naš primjer gumba i vidimo kako možemo pristupiti potrebnim atributima.
// Ovo je dugme var button = document.getElementById ("your-button-id"); // Dobivamo vrijednost var cmd = button.getAttribute ("data-cmd"); var id = button.getAttribute ("data-id"); // Promjena vrijednosti button.setAttribute ("data-cmd", yourNewCmd); button.setAttribute ("data-id", yourNewId);
Prilično jednostavno, zar ne? Sada samo proslijedite cmd i id parametre vašoj aplikaciji i izvršite traženi ajax zahtjev.
Čitanje / pisanje atributa datuma koristeći jQuery.
Evo jQuery analoga:
// Dobivamo vrijednost var cmd = $ ("# your-button-id"). Attr ("data-cmd"); var id = $ ("# id vašeg dugmeta"). attr ("id podataka"); // Promjena vrijednosti $ ("# your-button-id") .attr ("data-cmd", yourNewCmd) .attr ("data-id", yourNewId);
Ne treba se brkati sa metodom data (). Iako imaju nešto zajedničko, općenito su to potpuno različite stvari. Čak i ako niste u potpunosti upoznati s ovim metodama, samo koristite attr ().
Korištenje API-ja skupa podataka
HTML5 nam čak nudi API za rad sa atributima podataka, iako ga IE10 i niži ne podržavaju.
Opet, primjer sa dugmetom, ali ovaj put koristeći API skupa podataka:
// Ovo je dugme var button = document.getElementById ("your-button-id"); // Dobivamo vrijednost var cmd = button.dataset.cmd; var id = button.dataset.id; // Promjena vrijednosti button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;
Obratite pažnju na odsustvo prefiksa podataka i crtica. Baš kao i rad sa CSS svojstvima u JavaScript-u, potreban vam je hump casing. Dataset API prevodi imena atributa tako da data-some-attribute-name u HTML-u postane dataset.someAttributeName u JavaScript-u.
Šta se može uraditi sa atributima datuma
Navedeni primjeri su samo temelj. Možete izvoditi mnogo složenije operacije s atributima datuma. Pogledajmo neke primjere.
Filtracija
Recimo da radite sa listom stavki i trebate ih filtrirati po ključnoj riječi. Stavite ključne riječi u atribute podataka i obradite ih pomoću male iterativne skripte.
- Ford
- Chevrolet ...
Primjer "na kolenu":
$ ("# filter"). on ("keyup", funkcija () (var ključna riječ = $ (ovo) .val (). toLowerCase (); $ (. cars> li"). svaki (funkcija () ( $ (ovo) .toggle (keyword.length< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );
Stilizacija
Naravno, stilove je najbolje primijeniti pomoću klasa, ali isto se može učiniti korištenjem atributa podataka. Ovako možete stilizirati elemente koji imaju određeni atribut podataka, bez obzira na njegovu vrijednost. Hajde da prvo pogledamo HTML:
A sada CSS:
(pozadina: crvena;)
Ali kako smatrate vrijednost atributa? Ovako možete stilizirati sve elemente s atributom data-warning čija vrijednost sadrži riječ error:
(boja: crvena;)
Prilagodba
Dobro poznati okvir Bootstrap koristi atribute podataka za prilagođavanje svojih JavaScript dodataka. Primjer skočnog prozora:
Najbolji način za pohranjivanje podataka
Atributi datuma su vrlo česti u web tehnologijama. Što je najvažnije, oni su u potpunosti podržani od strane starijih pretraživača i prodiru sve dublje i dublje u web standarde. A pošto je HTML standard već odobren, sa njima možete raditi danas i ne plašiti se da će sutra iznenada nestati.
