Ich möchte ein einfaches jQuery-Plugin schreiben, das Inline-Modals unter bestimmten Elementen anzeigt. Meine Idee ist, dass das Skript basierend auf Datenattributen, die für Elemente angegeben sind, automatisch initialisiert wird.
Ein ganz einfaches Beispiel:
<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>
Ich frage mich nur, ob data-modal-target im obigen Beispiel gilt, oder muss es sein data-modal-target="true"? Ich interessiere mich nicht für etwas Beschisseneres als IE9 usw. Meine einzige Anforderung ist, dass es sich um gültiges HTML handelt.
Ich konnte nicht finden, wo benutzerdefinierte Datenattribute einen Wert erfordern oder nicht; und bin mir immer noch nicht sicher, ob ich den Wert weglassen oder nur sicherheitshalber einschließen soll. Die W3C-Spezifikation ist verwirrend (keine Überraschung). Ich denke, es kann vom Skript abhängen, das die Werte verwendet. (Kommentarbeispiel wird aufgrund der Längenbegrenzung unten fortgesetzt).
– Gutes Auge
15. Mai 2013 um 1:39 Uhr
zB verwende ich ein Plug-in, das benutzerdefinierte Datenattribute mit Standardwerten hat: einige Zeichenfolgen, einige boolesche Werte (was mich veranlasst, nach dieser Frage zu suchen). Die booleschen Daten haben eine Mischung davon, ob der Standardwert wahr oder falsch ist; Es prüft, ob es existiert oder einen Wert hat. Es prüft, ob der Wert entweder wahr oder leer (für wahr) oder falsch ist. Aber die Prüfung auf leer ist explizit im Code; es ist nicht “eingebaut”. Und es wird nicht nach dem Attributnamen gesucht, wie data-abc=”data-abc”, wie es ein boolesches Attribut erfordert; dies verursacht einen Fehler.
– Gutes Auge
15. Mai 2013 um 1:40 Uhr
Lloyd
Ja, vollkommen gültig. In Ihrem Fall, data-modal-target würde ein boolesches Attribut darstellen:
Das Vorhandensein eines booleschen Attributs auf einem Element stellt den wahren Wert dar, und das Fehlen des Attributs stellt den falschen Wert dar.
Hübsch! Danke für den Link, ich habe normalerweise nicht die Geduld, durch w3.org zu waten 🙂
– Adam Biggs
15. März 2012 um 23:04 Uhr
Ich weiß nicht, ob das Weglassen des Werts “verwandelt es in” ein boolesches Attribut – es scheint, dass die booleschen Attribute nicht willkürlich sind; Ich glaube, es gibt eine Liste davon. Vielleicht spielt es keine Rolle, ob es vom Browser/Skript als boolesche oder benutzerdefinierte Daten behandelt wird; aber vielleicht hängt es vom Skript ab, das es liest.
– Gutes Auge
15. Mai 2013 um 1:40 Uhr
Ich glaube, das hat sich geändert. Sicherlich wird das Beispiel, das ich in meinem Code verwende, nicht als boolescher Wert behandelt, sondern als leerer String. Also testen if ($('p').data('modal-target')) funktioniert nicht: stackoverflow.com/questions/16864999/….
– Derek Henderson
20. Dezember 2013 um 13:56 Uhr
sieht so aus, als ob das nicht stimmt element.dataset.modalTarget würde eine leere Zeichenfolge erzeugen, die falsch ist (Chrome 32), dasselbe Ergebnis mit jQuery
– H1D
22. Januar 2014 um 16:32 Uhr
Dies scheint eine Fehlinterpretation der Spezifikation zu sein. Der Abschnitt, auf den Sie verlinken, beschreibt boolesche Attribute, sagt jedoch nicht, ob benutzerdefinierte Datenattribute vorhanden sind dürfen boolsche Attribute sein.
Bestimmte Attribute können angegeben werden, indem nur der Attributname ohne Wert angegeben wird.
Im folgenden Beispiel ist die disabled Das Attribut wird mit der leeren Attributsyntax angegeben:
<input disabled>
Beachten Sie, dass die leere Attributsyntax genau gleichbedeutend mit der Angabe der leeren Zeichenfolge als Wert für das Attribut ist, wie im folgenden Beispiel.
<input disabled="">
Sie dürfen also leere benutzerdefinierte Datenattribute verwenden, es ist jedoch eine besondere Behandlung erforderlich, um sie als boolesche Werte zu verwenden.
Wenn Sie auf ein leeres Attribut zugreifen, ist sein Wert "". Da es sich um einen falschen Wert handelt, können Sie nicht einfach verwenden if (element.dataset.myattr) um zu prüfen, ob ein Attribut vorhanden ist.
Du solltest benutzen element.hasAttribute('myattr') oder if (element.dataset.myattr !== undefined) stattdessen.
Lloyds Antwort ist falsch. Er erwähnt den Link zur Mikrosyntax von booleschen Attributen, aber data-* Attribute sind in der Spezifikation nicht als boolean angegeben.
“Beachten Sie, dass die leere Attributsyntax genau gleichbedeutend mit der Angabe der leeren Zeichenfolge als Wert für das Attribut ist, wie im folgenden Beispiel.” ist genau das wonach ich gesucht habe. Insbesondere die von jQuery scriptAttrs Einstellung mag keine Ebene defer Wert, aber a defer: "" sollte den Trick machen. Danke!
Ich konnte nicht finden, wo benutzerdefinierte Datenattribute einen Wert erfordern oder nicht; und bin mir immer noch nicht sicher, ob ich den Wert weglassen oder nur sicherheitshalber einschließen soll. Die W3C-Spezifikation ist verwirrend (keine Überraschung). Ich denke, es kann vom Skript abhängen, das die Werte verwendet. (Kommentarbeispiel wird aufgrund der Längenbegrenzung unten fortgesetzt).
– Gutes Auge
15. Mai 2013 um 1:39 Uhr
zB verwende ich ein Plug-in, das benutzerdefinierte Datenattribute mit Standardwerten hat: einige Zeichenfolgen, einige boolesche Werte (was mich veranlasst, nach dieser Frage zu suchen). Die booleschen Daten haben eine Mischung davon, ob der Standardwert wahr oder falsch ist; Es prüft, ob es existiert oder einen Wert hat. Es prüft, ob der Wert entweder wahr oder leer (für wahr) oder falsch ist. Aber die Prüfung auf leer ist explizit im Code; es ist nicht “eingebaut”. Und es wird nicht nach dem Attributnamen gesucht, wie data-abc=”data-abc”, wie es ein boolesches Attribut erfordert; dies verursacht einen Fehler.
– Gutes Auge
15. Mai 2013 um 1:40 Uhr