Hur man bygger bättre UX med HTML5 Data- * attribut
Har du någonsin velat lägga till anpassade data till ett visst HTML-element för att senare få tillgång till det med JavaScript? Innan HTML5 kom fram på marknaden var lagring av anpassade data i samband med DOM ett riktigt väsen, och utvecklare måste använda alla typer av otäcka hackar, till exempel att införa icke-standardiserade attribut eller använda den föråldrade setUserData () -metoden för att lösa problemet.
Lyckligtvis behöver du inte göra det längre, eftersom HTML5 har introducerat nya globala data-* attribut som gör det möjligt att bädda in extra information om några HTML-element. Den nya data-* attribut gör HTML mer extensible, därför gör att du kan bygga mer komplexa appar, och skapa en mer sofistikerad användarupplevelse utan att behöva använda resurskrävande tekniker som Ajax-samtal eller databasfrågor på serversidan.
Webbläsarstöd för de nya globala attributen är relativt bra, eftersom de stöds av alla moderna webbläsare (IE8-10 stöder dem delvis).
Syntax av data-* attribut
Den nya syntaxen data-* attribut liknar den för de aria-prefixade attributen. Du kan infoga någon liten text i stället för * skylt. Du måste även ange ett värde för varje attribut i form av en sträng.
Låt oss säga att du vill skapa en Om oss sida och lagra namnet på den avdelning där varje anställd arbetar. Du behöver inte göra något annat än att lägga till dataavdelningen anpassat attribut till det lämpliga HTML-elementet på följande sätt:
- John Doe
- okänd kvinna
Beställnings data-* attribut är globala, precis som klass och id attribut, så att du kan använda dem på varje HTML-element. Du kan också lägga till så många data-* attribut till en HTML-tagg som du vill ha. I exemplet ovan kan du till exempel introducera ett nytt anpassat attribut som heter data användaren att lagra anställda användarnamn.
- John Doe
- okänd kvinna
Som en allmän regel, om du vill lägga till din egen anpassade attribut till ett HTML-element måste du alltid prefixa den med data- sträng. På samma sätt, när du ser ett dataprefixat attribut i någon annans kod, kan du säkert veta att det är ett anpassat attribut infört av författaren.
När du ska använda och när du inte ska använda egna attribut
W3C definierar anpassade data-* attribut som så:
“Anpassade dataattribut är avsedda att lagra anpassade data privata till sidan eller applikationen, för vilka det inte finns några mer lämpliga attribut eller element.”
Det är värt att överväga att använda data-* attribut när du inte hittar några andra semantiska attribut för de data du vill lagra.
Det är inte den bästa idén att använda dem enbart för styling ändamål, som för det du kan välja från klass och den stil attribut. Om du vill lagra en datatyp för vilken HTML5 har en semantisk attribut, till exempel datum Tid attribut för element, använd det istället för den data-prefixade attributet.
Det är viktigt att notera det data-* attribut innehåller data som är privat till sidan eller ansökan, vilket innebär att de kommer att ignoreras av användaragenter, till exempel sökrobotar och externa applikationer. Data-prefixade attribut kan endast nås av koden som körs på webbplatsen som är värd för HTML.
Beställnings data-* attribut används i stor utsträckning av frontend-ramar, till exempel Bootstrap och Zurb Foundation. Den goda nyheten är att du inte nödvändigtvis behöver veta hur man skriver JavaScript om du vill använda dataprefixerade attribut som en del av ett ramverk, eftersom du bara behöver lägga till dem i HTML-koden för att utlösa en funktionalitet hos en förskrivna JavaScript-plugin.
Kodstycket nedan lägger till ett verktygstips till vänster till en knapp i Bootstrap genom att använda data toggle och den data placering anpassade attribut och tilldela lämpliga värden till dem.
Mål data-* Attribut med CSS
Även om det inte rekommenderas att använda data-* attribut endast för styling ändamål, kan du välja de HTML-element som de tillhör med hjälp av allmänna attribut väljare. Om du vill välja varje element som har ett visst prefixat attribut, använd den här syntaxen i din CSS:
li [data-användare] färg: blå;
Observera att det inte är användarnamnen som visas i blått i kodfältet ovan - efter det att alla data som lagrats i de anpassade attributen inte är synliga - men namnen på de anställda som finns i element (i exemplet “John Doe” och “okänd kvinna”).
Om du bara vill välja element där ett dataprefixat attribut tar ett visst värde, är det syntaxen som ska användas:
li [data-department = "IT"] border: solid blue 1px;
Du kan använda alla de mer komplicerade CSS-attributväljarearna, till exempel den allmänna syskonkombinationen väljaren ([Uppgifter-värde ~ = "foo"]) eller jokerteckenväljaren ([Uppgifter-värde * = "foo"]), med data prefixade attribut också.
Tillgång data-* Attribut med JavaScript
Du kan komma åt de data som lagras i anpassningen data-* attribut med JavaScript genom att använda antingen datasetegenskapen eller jQuery s data() metod.
Vanilla JavaScript
De dataset egendom är egendom för HTMLElement gränssnitt, det betyder att du kan använda den på någon HTML-tagg. De dataset egendom ger tillgång till alla anpassade data-* attribut av det angivna HTML-elementet. Attributen returneras som en DOMStringMap objekt som innehåller en post för varje data-* attribut.
I vår Om oss sida exempel kan du enkelt kolla de anpassade attributen “okänd kvinna” har genom att använda dataset egendom på följande sätt:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap användare: "janedoe", avdelning: "IT" Du kan se det i den återvände DOMStringMap objekt mot data- prefix tas bort från namnen på attributen (användare istället för data användaren, och avdelning istället för dataavdelningen). Du måste använda attributen i samma format om du bara vill få tillgång till värdet för ett visst prefixat attribut (i stället för listan över alla anpassade attribut som i kodfältet ovan).
Du kan hämta värdet på ett specifikt data-* attribut som egenskap av dataset fast egendom. Som jag nämnde tidigare måste du släppa bort data- prefix från egenskapens namn, så om du vill få tillgång till Jane's värde data användaren attribut, kan du göra det här sättet:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery s data() metod
De data() jQuery-metoden gör det möjligt att få värdet av ett data-prefixat attribut. Här måste du också släppa bort data- prefixet från attributets namn för att få tillgång till det korrekt. I vårt exempel kan du visa ett varningsmeddelande med namnet på avdelningen där “Jane” fungerar med följande kod:
$ ("# jane"). sväva (funktion () varavdelning = $ ("# jane"). data ("avdelning"); varning (avdelning);); De data() Metoden behöver användas noggrant eftersom det inte bara fungerar som ett sätt att få värdet av en dataprefixat attribut, utan också att bifoga data till ett DOM-element på följande sätt:
var town = $ ("# jane"). data ("town", "new york"); Den extra data du bifogar med jQuery s data() Metoden kommer uppenbarligen inte att visas i HTML-koden som en ny data-* attribut, så om båda teknikerna används samtidigt, kommer det angivna HTML-elementet att lagra två uppsättningar data, en med HTML och den andra med jQuery.
I vårt exempel “Jane” fick en ny anpassad data ("stad") med jQuery, men denna nya nyckelvärdespar kommer inte att visas i HTML som en ny uppgifter-town attribut. Att lagra data på två olika sätt är inte den bästa lösningen minst sagt Använd bara en av de två metoderna samtidigt.
Tillgänglighet och data-* attribut
Som data hölls i anpassade data-* attribut är privata, det kan hända att assistentteknik inte har tillgång till den. Om du vill hålla innehållet tillgängligt för funktionshindrade användare rekommenderas det inte att lagra innehåll som kan vara viktigt för användarna på så sätt.
