Hvordan bygge bedre UX med HTML5 Data- * Attributter
Har du noen gang ønsket å legge til egendefinerte data i et bestemt HTML-element for senere å få tilgang til det med JavaScript? Før HTML5 dukket opp på markedet, var lagring av egendefinerte data knyttet til DOM et virkelig oppstyr, og utviklere måtte bruke alle slags ekle hack, for eksempel å introdusere ikke-standard attributter eller bruke den foreldede setUserData () -metoden for å løse problemet.
Heldigvis trenger du ikke å gjøre det mer, siden HTML5 har introdusert ny global data-* attributter som gjør det mulig å legge inn ekstra informasjon om noen HTML-elementer. Den nye data-* egenskaper gjør HTML mer utvidbart, derfor gjør det mulig å bygge mer komplekse apper, og skape en mer sofistikert brukeropplevelse uten å måtte bruke ressurskrevende teknikker som Ajax-samtaler eller forespørsler om server-side databaser.
Nettleserstøtte for de nye globale attributene er relativt bra, da de støttes av alle moderne nettlesere (IE8-10 støtter dem delvis).
Syntaks av data-* Egenskaper
Syntaksen til den nye data-* Attributene ligner på de aria-prefikserte attributter. Du kan sette inn noen små bokstaver i stedet for * skilt. Du må også tilordne en verdi til hvert attributt i form av en streng.
La oss si at du vil opprette en Om oss side, og lagre navnet på avdelingen hvor hver ansatt jobber. Du trenger ikke å gjøre noe annet enn å legge til data-avdelingen egendefinert attributt til riktig HTML-element på følgende måte:
- John Doe
- Jane Doe
Tilpasset data-* Attributene er globale, akkurat som klasse og id attributter, slik at du kan bruke dem på hvert HTML-element. Du kan også legge til så mange data-* attributter til en HTML-kode som du vil. I eksempelet ovenfor kan du for eksempel introdusere et nytt tilpasset attributt som heter data-bruker å lagre ansattes brukernavn.
- John Doe
- Jane Doe
Som en generell regel, hvis du vil legge til ditt eget tilpassede attributt til et HTML-element, må du alltid prefikse det med data- streng. På samme måte, når du ser et data-prefikset attributt i en andres kode, kan du sikkert vite at det er et tilpasset attributt innført av forfatteren.
Når skal du bruke og når du ikke skal bruke egendefinerte attributter
W3C definerer egendefinert data-* attributter som så:
“Egendefinerte dataattributter er ment å lagre egendefinerte data som er private til siden eller programmet, for hvilke det ikke finnes flere passende attributter eller elementer.”
Det er verdt å vurdere å bruke data-* egenskaper når du ikke finner noen andre semantiske attributter for dataene du vil lagre.
Det er ikke den beste ideen å bruke dem utelukkende for styling, som for det du kan velge fra klasse og stil egenskaper. Hvis du vil lagre en datatype for hvilken HTML5 har en semantisk attributt, for eksempel dato tid attributt for element, bruk det i stedet for data-prefiksattributtet.
Det er viktig å merke seg det data-* attributter inneholder data som er privat til siden eller søknaden, noe som betyr at de vil bli ignorert av brukeragenter, for eksempel søkemotorbots og eksterne applikasjoner. Data-prefikserte attributter kan bare nås av koden som kjører på nettstedet som er vert for HTML-en.
Tilpasset data-* Attributter brukes i stor grad av frontend-rammer, for eksempel Bootstrap og Zurb Foundation. Den gode nyheten er at du ikke nødvendigvis trenger å vite hvordan du skriver JavaScript hvis du vil bruke data prefixed attributter som en del av et rammeverk, siden du bare trenger å legge dem til HTML-koden for å utløse en funksjonalitet av en forhåndskrevne JavaScript-plugin.
Kodestykket nedenfor legger til et verktøytips til venstre til en knapp i Bootstrap ved å bruke data-vippe og data-plassering egendefinerte attributter og tilordne passende verdier til dem.
Mål data-* Attributter med CSS
Selv om det ikke anbefales å bruke data-* attributter bare for styling formål, kan du velge HTML-elementene de tilhører ved hjelp av generelle attributt selectors. Hvis du vil velge hvert element som har et bestemt datasprefiksattributt, bruker du denne syntaksen i CSS:
li [data-bruker] farge: blå;
Merk at det ikke er brukernavnene som vil bli vist i blått i kodestykket ovenfor - etter at alle dataene som er lagret i de egendefinerte attributter, ikke er synlige - men navnene på de ansatte som er inneholdt i elementer (i eksemplet “John Doe” og “Jane Doe”).
Hvis du bare vil velge elementer der et data-prefiksattributt har en viss verdi, er dette syntaksen som skal brukes:
li [data-avdeling = "IT"] border: solid blue 1px;
Du kan bruke alle de mer kompliserte CSS-attributtvelgerne, for eksempel den generelle søskenkombinatorvelgeren ([Data-verdi ~ = "foo"]) eller wildcardvelgeren ([Data-verdi * = "foo"]), med data-prefikserte attributter også.
Adgang data-* Attributter med JavaScript
Du kan få tilgang til dataene som er lagret i egendefinert data-* attributter med JavaScript ved å bruke enten datasettegenskapen eller jQuery's data() metode.
Vanilla JavaScript
De datasett Eiendommen er eiendommen til HTMLElement grensesnitt, det betyr at du kan bruke den på en hvilken som helst HTML-kode. De datasett Eiendommen gir tilgang til alle tilpassede data-* attributter av det oppgitte HTML-elementet. Attributtene returneres som en DOMStringMap objekt som inneholder en oppføring for hver data-* Egenskap.
I vår Om oss sideeksempel kan du enkelt sjekke de egendefinerte attributter “Jane Doe” har ved å bruke datasett eiendom på følgende måte:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap bruker: "janedoe", avdeling: "IT" Du kan se det i den returnerte DOMStringMap objektet data- prefikser fjernes fra navnene på attributter (bruker i stedet for data-bruker, og avdeling i stedet for data-avdelingen). Du må bruke attributter i samme format hvis du bare vil få tilgang til verdien til et bestemt datasprefiksattributt (i stedet for listen over alle egendefinerte attributter som i kodestykket ovenfor).
Du kan hente verdien av en bestemt data-* attributt som en eiendom til datasett eiendom. Som jeg nevnte før, må du utelate data- prefiks fra navnet på eiendommen, så hvis du vil ha tilgang til verdien av Jane's data-bruker attributt, du kan gjøre det på denne måten:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery data() metode
De data() jQuery-metoden gjør det mulig å få verdien av et data-prefikset attributt. Her må du også utelate data- prefiks fra navnet på attributtet for å få tilgang til det på riktig måte. I vårt eksempel kan du vise en varslingsmelding med navnet på avdelingen hvor “Jane” fungerer med følgende kode:
$ ("# jane") .vever (funksjon () var avdeling = $ ("# jane"). data ("avdeling"); varsling (avdeling);); De data() Metoden må brukes forsiktig, da den ikke bare virker som et middel for å få verdien av et datasprefiksattributt, men også for å feste data til et DOM-element på følgende måte:
var byen = $ ("# jane"). data ("by", "new york"); De ekstra dataene du legger til med jQuery's data() Metoden åpenbart vil ikke vises i HTML-koden som en ny data-* attributt, så hvis begge teknikkene brukes samtidig, vil det gitte HTML-elementet lagre to sett med data, ett med HTML og det andre med jQuery.
I vårt eksempel “Jane” fikk nye tilpassede data ("by") med jQuery, men dette nye nøkkelverdierparet vil ikke vises i HTML som nytt data-town Egenskap. Lagring av data på to forskjellige måter er ikke den beste praksisen å si mildt, så bare bruk en av de to metodene samtidig.
Tilgjengelighet og data-* Egenskaper
Som dataene holdes i egendefinert data-* Attributtene er private, hjelpemiddelsystemer kan ikke få tilgang til det. Hvis du vil beholde innholdet ditt tilgjengelig for funksjonshemmede brukere, anbefales det ikke å lagre innhold som kan være viktig for brukerne på denne måten.
