Vlad Merjevici
HTML 4 îi lipsea foarte mult capacitatea de a-ți crea propriile atribute pentru a stoca valori. De ce este necesar acest lucru? Iată câteva sarcini în care ați putea avea nevoie.
- Crearea de tooltips fără scripting.
- Determinarea stilului unui element pe baza valorii unui atribut.
- Obținerea și modificarea valorilor prin scripturi.
HTML5 introduce un nou atribut generic pe care îl puteți adăuga la orice etichetă. Regulile pentru scrierea atributului sunt simple:
- începe întotdeauna cu date-;
- folosim numai litere latine, cratima (-), două puncte (:) și liniuță (_).
CSS și JavaScript se referă la astfel de atribute ușor diferit, așa că haideți să vedem exemple pentru ele separat.
CSS
Există atribute de etichetă în CSS, dacă există vreun atribut sau o valoare dată, setăm stilul necesar.
Acum, în stiluri, ne putem referi la acest element ca un div și putem stabili designul dorit pentru el. În general, seamănă cu modul în care funcționează clasele, deci nu este o caracteristică unică sau necesară. Deci este mai util să setați valori.
În CSS, după aceea putem seta un stil diferit pentru diferite valori ale atributului nostru de coloane de date.
Div (lățime: 480 px;) div (lățime: 720 px;)
Din nou, acesta este într-o oarecare măsură un înlocuitor pentru clase, deoarece nimic nu vă împiedică să faceți clase cu numele coloana-2, coloana-3 și să le adăugați dacă este necesar.
Un caz de utilizare mai frumos este includerea funcției attr (). Obține valoarea atributului dat și o inserează în stil. Este convenabil să utilizați acest lucru pentru a crea indicații. Scriem textul direct în interiorul elementului și implementăm afișarea și designul tooltipului folosind CSS.
Temperatura apei
În acest exemplu, la element
JavaScript
Dacă în CSS ne referim direct la numele atributului, specificându-l în întregime, atunci în JavaScript acest lucru se face prin setul de date. Numele atributului în sine este convertit într-o variabilă conform următoarelor reguli:
- date- sunt aruncate;
- orice cratimă care precedă litera este eliminată, iar litera de după aceasta este scrisă cu majuscule.
În practică, arată așa.
descrierea datelor devine descriere.
data-full-description devine fullDescription.
data-description-of-tag devine descriptionOfTag.
Modul tradițional de a accesa un element și atributele acestuia este să setați un identificator și să faceți referire la element prin getElementById, așa cum se arată în exemplul de mai jos.
Mai întâi, adăugăm elementului un identificator cu o valoare unică. Apoi accesăm elementul prin getElementById. Acum putem accesa orice atribut de date prin metoda setului de date și nu numai să obținem, ci și să setăm valori. Acestea vor fi stocate până când pagina este reîncărcată sau până când este setată o nouă valoare.
Înainte de crearea HTML5, lucrul cu atribute în elemente HTML nu era, ca să spunem ușor, o plăcere. A trebuit să folosesc atribute precum rel sau class. Și unii dezvoltatori și-au creat chiar propriile atribute.
Dar lucrurile s-au schimbat dramatic atunci când HTML5 ne-a oferit posibilitatea de a folosi atributele lor de date. Acum este destul de ușor să salvați date suplimentare prin mijloace standard.
Cum funcționează atributele datei?
Numele vorbește de la sine. Atributele date stochează unele date pe care le specificați. Ele încep întotdeauna cu prefixul de date- și se termină cu ceva mai ușor de înțeles pentru dezvoltator (conform specificației, sunt permise doar litere mici și cratime). Un element poate conține orice număr de atribute de dată.
Un exemplu de utilizare a atributelor pentru a stoca datele utilizatorului:
Desigur, aceste date nu ajută prea mult utilizatorul final, deoarece pur și simplu nu le vede, dar atributele datei sunt foarte utilizate pe scară largă în tehnologiile web moderne.
Iată un exemplu de buton pentru a șterge ceva de pe pagina ta:
Toți parametrii necesari sunt la îndemână și gata să fie trimiși către scriptul backend. Gata cu atributele rel sau gestionarea ID-ului sau acțiunea necesară de la alte atribute.
Ce poate fi stocat?
Merită să ne amintim doar o singură regulă, obiectele nu pot fi stocate în atributele datei. Adică poți, dacă le serializezi în prealabil. Deocamdată, amintiți-vă că, în principiu, puteți stoca doar date șiruri.
Citirea/scrierea atributelor folosind javascript
Să ne întoarcem la exemplul nostru de buton și să vedem cum putem accesa atributele necesare.
// Acesta este un buton var button = document.getElementById ("id-ul-buton"); // Obține valoarea var cmd = button.getAttribute ("data-cmd"); var id = button.getAttribute ("data-id"); // Schimbați valoarea butonului.setAttribute ("data-cmd", yourNewCmd); button.setAttribute („data-id”, yourNewId);
Destul de simplu, nu-i așa? Acum doar transmiteți parametrii cmd și id aplicației dvs. și executați cererea ajax necesară.
Citiți / scrieți atributele date folosind jQuery.
Iată un analog jQuery:
// Obține valoarea var cmd = $ ("# your-button-id"). Attr ("data-cmd"); var id = $ ("# your-button-id"). attr ("data-id"); // Schimbați valoarea $ ("# your-button-id") .attr ("data-cmd", yourNewCmd) .attr ("data-id", yourNewId);
A nu se confunda cu metoda data (). Deși au ceva în comun, în general sunt lucruri complet diferite. Chiar dacă nu sunteți complet familiarizat cu aceste metode, utilizați doar attr ().
Folosind setul de date API
HTML5 ne oferă chiar și un API pentru a lucra cu atribute de date, deși IE10 și mai jos nu îl acceptă.
Din nou, un exemplu cu un buton, dar de data aceasta folosind API-ul setului de date:
// Acesta este un buton var button = document.getElementById ("id-ul-buton"); // Obține valoarea var cmd = button.dataset.cmd; var id = button.dataset.id; // Schimbați valoarea pentru button.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;
Rețineți absența prefixului de date și a cratimelor. La fel ca în lucrul cu proprietățile CSS în JavaScript, aveți nevoie de carcasă hump. API-ul Dataset traduce numele atributelor, astfel încât data-some-attribute-name în HTML devine dataset.someAttributeName în JavaScript.
Ce se poate face cu atributele datei
Exemplele date sunt doar fundația. Puteți efectua operațiuni mult mai complexe cu atribute de dată. Să aruncăm o privire la câteva exemple.
Filtrare
Să presupunem că lucrați cu o listă de articole și trebuie să le filtrați după cuvinte cheie. Plasați cuvintele cheie în atributele de date și procesați-le folosind un mic script iterativ.
- Vad
- Chevrolet ...
Un exemplu „pe genunchi”:
$ ("# filtru"). on ("keyup", function () (var cuvânt cheie = $ (this) .val (). toLowerCase (); $ (". cars> li"). fiecare (funcție () ( $ (acest) .toggle (cuvânt cheie.lungime< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );
Stilizare
Desigur, stilurile sunt cel mai bine aplicate folosind clase, dar același lucru se poate face folosind atributele de date. Acesta este modul în care puteți stila elementele care au un anumit atribut de date, indiferent de valoarea acestuia. Să aruncăm o privire mai întâi la HTML:
Și acum CSS:
(fond: roșu;)
Dar cum consideri valoarea unui atribut? Iată cum puteți stila toate elementele cu un atribut de avertizare de date a cărui valoare conține cuvântul eroare:
(culoarea rosie;)
Personalizare
Cunoscutul cadru Bootstrap folosește atribute de date pentru a-și personaliza pluginurile JavaScript. Exemplu pop-up:
Cel mai bun mod de a stoca date
Atributele datei sunt foarte frecvente în tehnologiile web. Cel mai important, sunt pe deplin acceptate de browsere mai vechi și pătrund din ce în ce mai profund în standardele web. Și, deoarece standardul HTML a fost deja aprobat, puteți lucra cu ele astăzi și nu vă fie teamă că vor dispărea brusc mâine.
