So erstellen Sie bessere UX mit HTML5-Daten- * -Attributen
Wollten Sie schon immer benutzerdefinierte Daten zu einem bestimmten HTML-Element hinzufügen, um später mit JavaScript darauf zuzugreifen? Bevor HTML5 auf den Markt kam, war das Speichern von benutzerdefinierten Daten, die mit dem DOM verknüpft sind, eine echte Aufregung, und Entwickler mussten alle möglichen bösen Hacks verwenden, z. B. nicht standardmäßige Attribute einführen oder die obsolete setUserData () -Methode verwenden, um das Problem zu umgehen.
Zum Glück müssen Sie dies nicht mehr tun, da HTML5 global neu eingeführt hat Daten-* Attribute, mit denen zusätzliche Informationen in beliebige HTML-Elemente eingebettet werden können. Das neue Daten-* Attribute machen Sie HTML erweiterbarer, deshalb Damit können Sie komplexere Apps erstellen, und schaffen Sie eine anspruchsvollere Benutzererfahrung, ohne ressourcenintensive Techniken wie Ajax-Aufrufe oder serverseitige Datenbankabfragen verwenden zu müssen.
Die Browser-Unterstützung der neuen globalen Attribute ist relativ gut, da sie von allen modernen Browsern unterstützt werden (IE8-10 unterstützt sie teilweise)..
Syntax der Daten-* Attribute
Die Syntax des Neuen Daten-* Attribute ähneln dem der Aria-vorangestellten Attribute. Sie können anstelle von die Zeichenfolge in Kleinbuchstaben einfügen * Zeichen. Sie müssen auch jedem Attribut einen Wert in Form einer Zeichenfolge zuweisen.
Angenommen, Sie möchten eine Über uns und speichern Sie den Namen der Abteilung, in der jeder Mitarbeiter arbeitet. Sie müssen nichts anderes tun, als das Hinzufügen von Datenabteilung benutzerdefiniertes Attribut für das entsprechende HTML-Element auf folgende Weise:
- John Doe
- Jane Doe
Brauch Daten-* Attribute sind global, genau wie die Klasse und Ich würde Attribute, damit Sie sie für jedes HTML-Element verwenden können. Sie können auch so viele hinzufügen Daten-* Attribute zu einem HTML-Tag nach Belieben. In dem obigen Beispiel können Sie beispielsweise ein neues benutzerdefiniertes Attribut einführen Datenbenutzer um die Benutzernamen der Mitarbeiter zu speichern.
- John Doe
- Jane Doe
Wenn Sie einem HTML-Element ein eigenes benutzerdefiniertes Attribut hinzufügen möchten, müssen Sie ihm in der Regel das voranstellen Daten- Schnur Wenn Sie im Code einer anderen Person ein mit Daten versehenes Attribut sehen, können Sie sicher sein, dass es sich um ein vom Autor eingeführtes benutzerdefiniertes Attribut handelt.
Wann zu verwenden und wann keine benutzerdefinierten Attribute verwendet werden
W3C definiert Gewohnheit Daten-* Attribute wie folgt:
“Benutzerdefinierte Datenattribute dienen zum Speichern benutzerdefinierter Daten für die Seite oder Anwendung, für die keine geeigneten Attribute oder Elemente vorhanden sind.”
Es lohnt sich zu überlegen Daten-* Attribute wenn Sie keine anderen semantischen Attribute für die Daten finden können, die Sie speichern möchten.
Es ist nicht die beste Idee, sie ausschließlich zu Gestaltungszwecken zu verwenden, da Sie aus dem auswählen können Klasse und das Stil Attribute. Wenn Sie einen Datentyp speichern möchten, für den HTML5 ein semantisches Attribut enthält, z Terminzeit Attribut für die Verwenden Sie das Element anstelle des Attributs mit Datenvorzeichen.
Es ist wichtig, das zu beachten Daten-* Attribute enthalten Daten, das ist privat auf der Seite oder der Anwendung, Dies bedeutet, dass sie von Benutzeragenten wie Suchmaschinenbots und externen Anwendungen ignoriert werden. Auf Daten mit Präfix kann nur durch den Code zugegriffen werden, der auf der Site ausgeführt wird, die den HTML-Code hostet.
Brauch Daten-* Attribute werden auch von Frontend-Frameworks wie Bootstrap und Zurb Foundation umfassend verwendet. Die gute Nachricht ist, dass Sie nicht unbedingt wissen müssen, wie Sie JavaScript schreiben, wenn Sie Daten-Präfix-Attribute als Teil eines Frameworks verwenden möchten, da Sie diese nur zum HTML-Code hinzufügen müssen, um eine Funktionalität von a auszulösen vorbeschriebenes JavaScript-Plugin.
Mit dem folgenden Code-Snippet wird links eine QuickInfo zu einer Schaltfläche in Bootstrap hinzugefügt, indem der verwendet wird Datenumschaltung und das Datenplatzierung benutzerdefinierte Attribute und weisen ihnen entsprechende Werte zu.
Ziel Daten-* Attribute mit CSS
Obwohl es nicht empfohlen wird zu verwenden Daten-* Wenn Sie Attribute nur zu Gestaltungszwecken verwenden, können Sie die HTML-Elemente, zu denen sie gehören, mit Hilfe allgemeiner Attributselektoren auswählen. Wenn Sie jedes Element auswählen möchten, das ein bestimmtes Daten-Präfix-Attribut aufweist, verwenden Sie diese Syntax in Ihrem CSS:
li [datenbenutzer] farbe: blau;
Beachten Sie, dass im obigen Code-Snippet nicht die Benutzernamen in Blau angezeigt werden, nachdem alle in den benutzerdefinierten Attributen gespeicherten Daten nicht sichtbar sind, sondern die Namen der Mitarbeiter, die in der Datenbank gespeichert sind Elemente (im Beispiel “John Doe” und “Jane Doe”).
Wenn Sie nur Elemente auswählen möchten, bei denen ein mit Daten versehenes Attribut einen bestimmten Wert annimmt, ist dies die zu verwendende Syntax:
li [data-department = "IT"] border: durchgehend blau 1px;
Sie können alle komplizierteren CSS-Attributselektoren verwenden, z. B. den allgemeinen Kombinationsselektor für Geschwister ([data-value ~ = "foo"]) oder die Wildcard-Auswahl ([data-value * = "foo"]), auch mit Daten-vorangestellten Attributen.
Zugriff Daten-* Attribute mit JavaScript
Sie können auf die im benutzerdefinierten Bereich gespeicherten Daten zugreifen Daten-* Attribute mit JavaScript mithilfe der Eigenschaft dataset oder von jQuery Daten() Methode.
Vanille JavaScript
Das Datensatz Eigentum ist Eigentum der HTMLElement Schnittstelle, dh Sie können es auf jedem HTML-Tag verwenden. Das Datensatz Eigenschaft gibt Zugang zu allen Gewohnheiten Daten-* Attribute des angegebenen HTML-Elements. Die Attribute werden als zurückgegeben DOMStringMap Objekt, das jeweils einen Eintrag enthält Daten-* Attribut.
In unserer Über uns Seitenbeispiel Sie können die benutzerdefinierten Attribute einfach überprüfen “Jane Doe” hat durch die Verwendung der Datensatz Eigenschaft auf folgende Weise:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap Benutzer: "Janedoe", Abteilung: "IT" Sie können das in den zurückgegebenen sehen DOMStringMap Gegenstand der Daten- Präfixe werden aus den Namen der Attribute entfernt (Nutzer anstatt Datenbenutzer, und Abteilung anstatt Datenabteilung). Sie müssen die Attribute im gleichen Format verwenden, wenn Sie nur auf den Wert eines bestimmten Attributs mit Datenvorzeichen zugreifen möchten (anstelle der Liste aller benutzerdefinierten Attribute wie im obigen Codeausschnitt)..
Sie können den Wert eines bestimmten Objekts abrufen Daten-* Attribut als Eigenschaft des Datensatz Eigentum. Wie ich bereits erwähnt habe, müssen Sie das weglassen Daten- Präfix aus dem Namen der Eigenschaft, also, wenn Sie auf den Wert von Jane zugreifen möchten Datenbenutzer Attribut können Sie es so machen:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's Daten() Methode
Das Daten() Die jQuery-Methode ermöglicht es, den Wert eines Attributs mit Datenpräfix zu erhalten. Hier müssen Sie auch das weglassen Daten- Präfix aus dem Namen des Attributs, um ordnungsgemäß darauf zuzugreifen. In unserem Beispiel können Sie eine Warnmeldung mit dem Namen der Abteilung anzeigen “Jane” arbeitet mit dem folgenden Code:
$ ("# jane"). hover (Funktion () var department = $ ("# jane"). data ("department"); alert (department);); Das Daten() Die Methode muss sorgfältig verwendet werden, da sie nicht nur als Mittel zum Abrufen des Werts eines Attributs mit Datenvorgabe dient, sondern auch, um Daten auf folgende Weise an ein DOM-Element anzuhängen:
var town = $ ("# jane"). data ("Stadt", "New York"); Die zusätzlichen Daten, die Sie mit jQuery anhängen Daten() Die Methode erscheint offensichtlich nicht als neue im HTML-Code Daten-* Wenn also beide Techniken gleichzeitig verwendet werden, speichert das angegebene HTML-Element zwei Datensätze, eine mit HTML und die andere mit jQuery.
In unserem Beispiel “Jane” neue benutzerdefinierte Daten erhalten ("Stadt, Dorf") mit jQuery, aber dieses neue Schlüssel-Wert-Paar wird in HTML nicht als neues angezeigt Datenstadt Attribut. Das Speichern von Daten auf zwei verschiedene Arten ist nicht die beste Methode, um es gelinde auszudrücken Verwenden Sie nur eine der beiden Methoden gleichzeitig.
Zugänglichkeit und Daten-* Attribute
Da die Daten in Gewohnheit gehalten werden Daten-* Attribute sind privat, assistive Technologien können möglicherweise nicht auf sie zugreifen. Wenn Sie möchten, dass Ihre Inhalte für deaktivierte Benutzer zugänglich bleiben, wird es nicht empfohlen, Inhalte zu speichern, die für Benutzer auf diese Weise wichtig sein können.
