Hoe u betere UX kunt bouwen met HTML5-gegevens- * Attributen
Heeft u ooit aangepaste gegevens willen toevoegen aan een bepaald HTML-element om het later met JavaScript te kunnen gebruiken? Voordat HTML5 op de markt verscheen, was het opslaan van aangepaste gegevens die aan de DOM waren gekoppeld een heuse ophef en ontwikkelaars moesten allerlei vervelende hacks gebruiken, zoals het introduceren van niet-standaard attributen of het gebruik van de verouderde setUserData () -methode om het probleem te omzeilen.
Gelukkig hoef je dat niet meer te doen, want HTML5 heeft een nieuw wereldwijd aanbod geïntroduceerd gegevens-* attributen die het mogelijk maken om extra informatie over HTML-elementen in te bedden. De nieuwe gegevens-* attributen maak HTML meer uitbreidbaar, daarom stelt u in staat om complexere apps te bouwen, en maak een meer geavanceerde gebruikerservaring zonder gebruik te maken van resource-intensieve technieken zoals Ajax-calls of server-side databasequery's.
Browserondersteuning van de nieuwe globale kenmerken is relatief goed, omdat ze door alle moderne browsers worden ondersteund (IE8-10 ondersteunt ze gedeeltelijk).
Syntaxis van de gegevens-* attributen
De syntaxis van het nieuwe gegevens-* attributen is vergelijkbaar met die van de aria-prefixed attributen. U kunt elke kleine tekenreeks invoegen in plaats van de * teken. U moet ook een waarde toewijzen aan elk attribuut in de vorm van een tekenreeks.
Laten we zeggen dat je een wilt maken Over ons pagina en sla de naam op van de afdeling waar elke medewerker werkt. U hoeft niets anders te doen dan het toevoegen van de data-afdeling aangepast kenmerk aan het juiste HTML-element op de volgende manier:
- John Doe
- Jane Doe
gewoonte gegevens-* attributen zijn globaal, net als de klasse en ID kaart kenmerken, zodat u ze op elk HTML-element kunt gebruiken. Je kunt er ook zoveel toevoegen gegevens-* schrijft naar een HTML-tag toe zoals u dat wilt. In het bovenstaande voorbeeld kunt u bijvoorbeeld een nieuw aangepast kenmerk introduceren data-user om gebruikersgebruikersnamen op te slaan.
- John Doe
- Jane Doe
Als algemene regel geldt dat als u uw eigen aangepast kenmerk aan een HTML-element wilt toevoegen, u dit altijd met het gegevens- draad. Op dezelfde manier kunt u, als u een kenmerk met gegevens als voorvoegsel in de code van iemand anders ziet, zeker weten dat het een aangepast kenmerk is dat door de auteur is geïntroduceerd.
Wanneer te gebruiken en wanneer geen aangepaste kenmerken te gebruiken
W3C definieert gebruikelijk gegevens-* attributen zoals zo:
“Aangepaste gegevenskenmerken zijn bedoeld om aangepaste gegevens privé op te slaan op de pagina of toepassing waarvoor geen geschikte kenmerken of elementen meer zijn.”
Het is de moeite waard om te overwegen om te gebruiken gegevens-* attributen wanneer u geen andere semantische attributen kunt vinden voor de gegevens die u wilt opslaan.
Het is niet het beste idee om ze alleen voor stylingdoeleinden te gebruiken, want daarvoor kun je kiezen uit de klasse en de stijl attributen. Als u een gegevenstype wilt opslaan waarvoor HTML5 een semantisch kenmerk heeft, zoals de datum Tijd attribuut voor de element, gebruik dat in plaats van het kenmerk data-prefixed.
Het is belangrijk om dat op te merken gegevens-* attributen bevatten gegevens die dat zijn privé voor de pagina of de toepassing, wat betekent dat ze worden genegeerd door user-agents, zoals bots van zoekmachines en externe applicaties. Data-prefixed attributen kunnen alleen worden gebruikt door de code die wordt uitgevoerd op de site die de HTML host.
gewoonte gegevens-* attributen worden ook veel gebruikt door frontend frameworks, zoals Bootstrap en Zurb Foundation. Het goede nieuws is dat je niet per se hoeft te weten hoe je JavaScript moet schrijven als je data-prefixed attributen als onderdeel van een framework wilt gebruiken, omdat je ze alleen aan de HTML-code hoeft toe te voegen om een functionaliteit van een vooraf geschreven JavaScript-plug-in.
Het onderstaande codefragment voegt een tooltip aan de linkerkant toe aan een knop in Bootstrap door gebruik te maken van de data-toggle en de data-plaatsing aangepaste kenmerken en het toewijzen van passende waarden daaraan.
Doelwit gegevens-* Attributen met CSS
Hoewel het niet wordt aanbevolen om te gebruiken gegevens-* attributen alleen voor stylingdoeleinden, kunt u de HTML-elementen selecteren waartoe ze behoren met behulp van algemene attribuutselectoren. Als u elk element wilt selecteren met een bepaald kenmerk met gegevens als voorvoegsel, gebruikt u deze syntaxis in uw CSS:
li [data-user] kleur: blauw;
Houd er rekening mee dat niet de gebruikersnamen in blauw worden weergegeven in het bovenstaande codefragment - nadat alle gegevens die zijn opgeslagen in de aangepaste kenmerken niet zichtbaar zijn - maar de namen van werknemers in de elementen (in het voorbeeld “John Doe” en “Jane Doe”).
Als u alleen elementen wilt selecteren waarin een kenmerk met gegevens als prefix een bepaalde waarde aanneemt, is dit de syntaxis die u moet gebruiken:
li [data-afdeling = "IT"] border: effen blauw 1px;
U kunt alle meer ingewikkelde CSS-attribuutselectoren gebruiken, zoals de algemene sibling combinator selector ([Data-value = ~ "foo"]) of de jokertekenknop ([-Data value * = "foo"]), met data-prefixed attributen ook.
Toegang gegevens-* Kenmerken met JavaScript
U hebt toegang tot de gegevens die zijn opgeslagen in de aangepaste gegevens-* kenmerkt met JavaScript door de eigenschap dataset of jQuery's te gebruiken gegevens() methode.
Vanille JavaScript
De dataset eigendom is het eigendom van de Lijst van HTML-elementen interface, dat betekent dat u het op elke HTML-tag kunt gebruiken. De dataset eigenschap geeft toegang tot alle aangepaste gegevens-* kenmerken van het gegeven HTML-element. De attributen worden geretourneerd als een DOMStringMap object dat voor elk een item bevat gegevens-* attribuut.
In onze Over ons pagina voorbeeld kunt u gemakkelijk de aangepaste kenmerken controleren “Jane Doe” heeft met behulp van de dataset eigendom op de volgende manier:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", afdeling: "IT" Dat zie je terug in het geretourneerde DOMStringMap maak bezwaar tegen gegevens- voorvoegsels worden verwijderd uit de namen van de kenmerken (gebruiker in plaats van data-user, en afdeling in plaats van data-afdeling). U moet de kenmerken in dezelfde indeling gebruiken als u alleen toegang wilt tot de waarde van een bepaald gegeven met gegevensprefix (in plaats van de lijst met alle aangepaste kenmerken, zoals in het bovenstaande codefragment).
U kunt de waarde van een specifiek ophalen gegevens-* attribuut als een eigenschap van de dataset eigendom. Zoals ik eerder al zei, moet je de. Weglaten gegevens- voorvoegsel van de naam van de eigenschap, dus als u toegang wilt tot de waarde van Jane's data-user kenmerk, je kunt het op deze manier doen:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery gegevens() methode
De gegevens() De jQuery-methode maakt het mogelijk om de waarde te krijgen van een door gegevens vooraf opgegeven kenmerk. Hier moet je ook de. Weglaten gegevens- prefix uit de naam van het attribuut om er op de juiste manier toegang toe te hebben. In ons voorbeeld kunt u een waarschuwingsbericht weergeven met de naam van de afdeling waar “Jane” werkt met de volgende code:
$ ("# jane"). hover (function () var department = $ ("# jane"). data ("department"); alert (department);); De gegevens() methode moet zorgvuldig worden gebruikt, omdat het niet alleen als middel fungeert om de waarde van een voorgegevens-voor-gegeven kenmerk te krijgen, maar ook om gegevens als volgt aan een DOM-element te koppelen:
var town = $ ("# jane"). data ("town", "New York"); De extra gegevens die u koppelt aan jQuery's gegevens() methode zal uiteraard niet in de HTML-code verschijnen als een nieuwe gegevens-* attribuut, dus als beide technieken tegelijkertijd worden gebruikt, slaat het gegeven HTML-element twee reeksen gegevens op, één met HTML en één met jQuery.
In ons voorbeeld “Jane” heb nieuwe aangepaste gegevens ("stad") met jQuery, maar dit nieuwe sleutel / waarde-paar wordt niet als nieuw in HTML weergegeven data-town attribuut. Het opslaan van gegevens op twee verschillende manieren is op zijn zachtst gezegd niet de beste methode gebruik slechts een van de twee methoden tegelijk.
Toegankelijkheid en gegevens-* attributen
Zoals de gegevens in gebruik gegevens-* attributen zijn privé, ondersteunende technologieën hebben mogelijk geen toegang. Als u uw inhoud toegankelijk wilt houden voor gehandicapte gebruikers, wordt het niet aanbevolen om inhoud op te slaan die op deze manier belangrijk kan zijn voor gebruikers.
