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 behøver du ikke å gjøre det lenger, siden HTML5 har introdusert nye globale data-* attributter som gjør det mulig å legge inn ekstra informasjon om HTML-elementer. De nye data-* attributtene gjør HTML mer utvidbart, slik at du kan bygge mer komplekse apper og skape en mer sofistikert brukeropplevelse uten å måtte bruke ressursintensive teknikker som Ajax-samtaler eller server-side databasesøk.

Nettleserstøtte av de nye globale attributene er relativt bra, da de støttes av alle moderne nettlesere (IE8-10 støtter dem delvis).

Syntaxen til de nye data-* attributter ligner på de aria-prefikserte attributter. Du kan sette inn noen små bokstaver i stedet for * -tegnet. 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 tilpasset attributt for dataavdeling til riktig HTML-element på følgende måte:

 John Doe
 Jane Doe

Egendefinerte data-* attributter er globale, akkurat som class 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 egendefinert attributt som kalles data-user å 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- . 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 egendefinerte data-* attributter som så:

"Egendefinerte dataattributter er ment å lagre egendefinerte data private til siden eller applikasjonen, for hvilke det ikke finnes flere passende attributter eller elementer."

Det er verdt å vurdere å bruke data-* attributter 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, for det du kan velge fra class og stilattributtene. Hvis du vil lagre en datatype for hvilken HTML5 har en semantisk attributt, for eksempel datetime attributten for element, bruk det i stedet for data-prefixed attributtet.

Det er viktig å merke seg at data-* attributter inneholder data som er private til siden eller applikasjonen, 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.

Tilpassede 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-prefikserte 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 å benytte seg av data-toggle og tilpassede attributter for dataplassering, og tilordne passende verdier til dem.

 Verktøytip på venstre side 

data-* Attributter med CSS

Selv om det ikke anbefales å bruke data-* attributter bare for styling, kan du velge HTML-elementene de tilhører ved hjelp av generelle attributtvelger. Hvis du vil velge hvert element som har et bestemt datasprefiksattributt, bruker du denne syntaksen i CSS:

 li [data-bruker] {farge: blå; } 

Vær oppmerksom på at det ikke er brukernavnene som vil bli vist i blått i kodestykket over - 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 eksempelet "John Doe" og "Jane Doe").

Hvis du bare vil velge elementer der et datasprefiksattributt 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-value~="foo"] ) eller wildcardvelgeren ( [data-value*="foo"] ) prefikserte attributter også.

Få tilgang til data-* Attributter med JavaScript

Du kan få tilgang til dataene som er lagret i de egendefinerte data-* attributter med JavaScript ved hjelp av datasettegenskapen eller jQuery's data() -metoden.

Vanilla JavaScript

dataset er egenskapen til HTMLElement grensesnittet, som betyr at du kan bruke den på en hvilken som helst HTML-tag. dataset gir tilgang til alle egendefinerte data-* attributter av det oppgitte HTML-elementet. Attributtene returneres som et DOMStringMap objekt som inneholder en oppføring for hvert data-* attributt.

I vårt Om oss- sideeksempel kan du enkelt sjekke de egendefinerte attributene "Jane Doe" har ved å bruke dataset på følgende måte:

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap {bruker: "janedoe", avdeling: "IT"} 

Du kan se at i det returnerte DOMStringMap objektet blir DOMStringMap fjernet fra navnene på attributter ( user stedet for data-user og department stedet for DOMStringMap ). 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 et bestemt data-* attributt som en egenskap for dataset . Som jeg nevnte før, må du utelate data- fra navnet på eiendommen, så hvis du vil få tilgang til verdien av Jane's data-user, kan du gjøre det på denne måten:

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe 

jQuery's data() -metode

data() jQuery-metoden gjør det mulig å få verdien av et data-prefikset attributt. Her må du også data- dataprefikset fra navnet på attributtet for å få tilgang til det på riktig måte. I vårt eksempel kan du vise en varselmelding med navnet på avdelingen der "Jane" fungerer med følgende kode:

 $ ("# jane") .vever (funksjon () {var avdeling = $ ("# jane") .data ("avdeling"); varsling (avdeling);}); 

data() -metoden må brukes forsiktig, da den ikke bare virker som et middel for å få verdien av et data-prefiksattributt, 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 et nytt data-* attributt, så hvis begge teknikkene brukes samtidig, vil det gitte HTML-elementet lagre to sett med data, en med HTML og den andre med jQuery.

I vårt eksempel "Jane" fikk en ny egendefinert data ( "town" ) med jQuery, men dette nye nøkkelverdiereparet vil ikke vises i HTML som et nytt datastedsattributt. Lagring av data på to forskjellige måter er ikke den beste praksisen å si mildt, så bruk bare en av de to metodene samtidig .

Tilgjengelighet og data-* Attributter

Siden dataene som er lagret i egendefinerte data-* attributter er private, kan det hende at assistentteknologi ikke har 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.

200 Tastaturgenveier (Windows) for å øke produktiviteten din

Tastaturgenveier kan øke produktiviteten din hvis din daglige jobb er avhengig av bruk av Windows. De får ikke jobben raskt, men forbedrer også effektiviteten . Gi dem en prøve, og du kan bare finne deg selv avhengig av tastaturgenveier.Vi har samlet en liste over tastatursnarveier for Windows 190 + snarveier gruppert i kategorier for enkel tilgang. Hv

(Tekniske og design tips)

6 Best Smartphone Overhead Stativ (så langt)

Enten du kjører en matblogg eller ser på å ta noen produktfotografier, er den beste måten å fange den på, gjennom overheadfotografering, da det bidrar til å fokusere på det som er viktig ved å fjerne dimensjonene. Det er imidlertid ikke lett å ta bilder ovenfra ved 90 ° vinkel, spesielt hvis du ønsker å gjøre litt mobilfotografering.Det du trenge

(Tekniske og design tips)