Hvordan man opbygger bedre UX med HTML5 Data- * Attributter
Har du nogensinde ønsket at tilføje brugerdefinerede data til et bestemt HTML-element for senere at få adgang til det med JavaScript? Før HTML5 optrådte på markedet, var opbevaring af brugerdefinerede data, der var knyttet til DOM, et reelt problem, og udviklere måtte bruge alle former for ubehagelige hacks, såsom at indføre ikke-standard attributter eller bruge den forældede setUserData () metode til at løse problemet.
Heldigvis behøver du ikke gøre det mere, da HTML5 har introduceret nye globale data-* attributter, der gør det muligt at indlejre ekstra information om ethvert HTML-element. Den nye data-* egenskaber gør HTML mere udvidelig, derfor sætte dig i stand til at opbygge mere komplekse apps, og skabe en mere sofistikeret brugeroplevelse uden at skulle bruge ressourceintensive teknikker som Ajax-opkald eller forespørgsler på server-side database.
Browserunderstøttelse af de nye globale attributter er forholdsvis god, da de understøttes af alle moderne browsere (IE8-10 støtter dem delvis).
Syntaks af data-* Egenskaber
Syntikken af den nye data-* attributter ligner den af de aria-præfikserede attributter. Du kan indsætte en lille bogstav i stedet for * skilt. Du skal også tildele en værdi til hver attribut i form af en streng.
Lad os sige, at du vil oprette en Om os side, og gem navnet på den afdeling, hvor hver medarbejder arbejder. Du behøver ikke gøre noget andet bortset fra at tilføje data-afdeling brugerdefineret attribut til det relevante HTML-element på følgende måde:
- John Doe
- Jane Doe
Brugerdefinerede data-* Attributter er globale, ligesom klasse og id attributter, så du kan bruge dem på hvert HTML-element. Du kan også tilføje så mange data-* attributter til en HTML-tag, som du vil have. I eksemplet ovenfor kan du for eksempel indføre en ny brugerdefineret attributt, der hedder data-user at gemme medarbejder brugernavne.
- John Doe
- Jane Doe
Som en generel regel, hvis du vil tilføje din egen tilpassede attribut til et HTML-element, skal du altid prefixere det med data- snor. Ligeledes kan du, når du ser en data-præfikset attribut i en andens kode, sikkert vide, at det er en brugerdefineret attribut, der er introduceret af forfatteren.
Hvornår skal du bruge og når du ikke bruger brugerdefinerede attributter
W3C definerer brugerdefineret data-* attributter som sådan:
“Brugerdefinerede dataattributter er beregnet til at gemme brugerdefinerede data, der er private til siden eller applikationen, for hvilke der ikke er flere egnede attributter eller elementer.”
Det er værd at overveje at bruge data-* egenskaber når du ikke kan finde andre semantiske attributter til de data, du vil gemme.
Det er ikke den bedste ide at bruge dem udelukkende til styling formål, som for at du kan vælge fra klasse og stil egenskaber. Hvis du vil gemme en datatype, for hvilken HTML5 har en semantisk attribut, f.eks dato tid attribut for element, brug det i stedet for den data-præfikset attribut.
Det er vigtigt at bemærke det data-* attributter indeholder data, der er privat til siden eller ansøgningen, hvilket betyder, at de vil blive ignoreret af brugeragenter, såsom søgemaskinebots og eksterne applikationer. Data-præfikset attributter kan kun få adgang til koden, der kører på webstedet, der er vært for HTML'en.
Brugerdefinerede data-* attributter anvendes i vid udstrækning af frontend-rammer, såsom Bootstrap og Zurb Foundation. Den gode nyhed er, at du ikke nødvendigvis behøver at vide, hvordan du skriver JavaScript, hvis du vil bruge data-præfikserede attributter som en del af en ramme, da du kun skal føje dem til HTML-koden for at udløse en funktionalitet af en prewritten JavaScript plugin.
Kodestykket nedenfor tilføjer et værktøjstip til venstre til en knap i Bootstrap ved at bruge data-toggle og data-placering brugerdefinerede attributter og tildele passende værdier til dem.
Mål data-* Attributter med CSS
Selvom det ikke anbefales at bruge data-* attributter kun til styling, kan du vælge de HTML-elementer, de tilhører, ved hjælp af generelle attributtselektorer. Hvis du vil vælge hvert element, der har en bestemt dataspecificeret attribut, skal du bruge denne syntaks i dit CSS:
li [data-bruger] farve: blå;
Bemærk, at det ikke er brugernavnene, der vises i blåt i kodestykket ovenfor - efter alle data, der er gemt i de brugerdefinerede attributter, er det ikke synligt - men navnene på de ansatte, der er indeholdt i elementer (i eksemplet “John Doe” og “Jane Doe”).
Hvis du kun vil vælge elementer, hvor en dataprefixeret attributter en bestemt værdi, er det den syntaks, der skal bruges:
li [data-afdeling = "IT"] border: solid blue 1px;
Du kan bruge alle de mere komplicerede CSS-attributtsvælgere, som f.eks. Den generelle søskendekombination vælger ([Data-værdi ~ = "foo"]) eller wildcard-vælgeren ([Data-værdi * = "foo"]), med data-præfikset attributter også.
Adgang data-* Attributter med JavaScript
Du kan få adgang til de data, der er gemt i brugerdefineret data-* attributter med JavaScript ved at bruge enten datasætegenskaben eller jQuery's data() metode.
Vanilla JavaScript
Det datasæt Ejendommen tilhører HTMLElement interface, det betyder at du kan bruge det på ethvert HTML-tag. Det datasæt Ejendommen giver adgang til alle brugerdefinerede data-* attributter af det givne HTML element. Attributterne returneres som en DOMStringMap objekt, der indeholder en post for hver data-* attribut.
I vores Om os sideeksempel kan du nemt kontrollere de tilpassede attributter “Jane Doe” har ved at bruge datasæt ejendom på følgende måde:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap bruger: "janedoe", afdeling: "IT" Du kan se det i den returnerede DOMStringMap protestere mod data- præfikser fjernes fra navnene på attributterne (bruger i stedet for data-user, og afdeling i stedet for data-afdeling). Du skal bruge attributterne i samme format, hvis du kun vil få adgang til værdien af en bestemt data-præfikset attribut (i stedet for listen over alle brugerdefinerede attributter som i kodestykket ovenfor).
Du kan hente værdien af en bestemt data-* attribut som en ejendom af datasæt ejendom. Som jeg nævnte før, skal du udelade data- præfiks fra ejendommens navn, så hvis du vil have adgang til Jane's værdi data-user attribut, kan du gøre det på denne måde:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery er data() metode
Det data() jQuery-metoden gør det muligt at få værdien af en data-præfikset attribut. Her er du også nødt til at udelade data- præfiks fra navnet på attributten for at få adgang til det korrekt. I vores eksempel kan du vise en advarselsmeddelelse med navnet på afdelingen hvor “Jane” arbejder med følgende kode:
$ ("# jane"). hover (funktion () var department = $ ("# jane") data ("afdeling"); alarm (afdeling);); Det data() Metoden skal bruges omhyggeligt, da den ikke kun virker som et middel til at få værdien af en data-præfikset attribut, men også at vedhæfte data til et DOM-element på følgende måde:
var by = $ ("# jane") data ("by", "New York"); De ekstra data, du vedhæfter med jQuery's data() Metoden vil tydeligvis ikke vises i HTML-koden som en ny data-* attribut, så hvis begge teknikker anvendes samtidigt, vil det givne HTML element gemme to sæt data, et med HTML og det andet med jQuery.
I vores eksempel “Jane” fik en ny brugerdefineret data ("by") med jQuery, men dette nye nøgleværdipar vil ikke blive vist i HTML som nyt data-by attribut. Lagring af data på to forskellige måder er ikke den bedste praksis at sige mildt brug kun en af de to metoder på én gang.
Tilgængelighed og data-* Egenskaber
Som de data, der holdes i brugerdefineret data-* Attributter er private, hjælpemidler kan muligvis ikke få adgang til det. Hvis du vil holde dit indhold tilgængeligt for handicappede brugere, anbefales det ikke at gemme indhold, der kan være vigtigt for brugerne på denne måde.
