Die beste Methode zum Hinzufügen von Metadaten zu HTML-Elementen

Ich versuche, eine Möglichkeit zu erstellen, verschiedene Komponenten in HTML zu markieren, die von einem jQuery-Skript analysiert und beim Laden der Seite erstellt werden.Die beste Methode zum Hinzufügen von Metadaten zu HTML-Elementen

Zum Beispiel im Moment habe ich folgendes in meiner Seite setzen können ..

<a href="link.html" class="Theme-Button Theme-Button-Style-win2007 Theme-Button-iconLeft Theme-Button-AlignmentCenter Theme-Button-fullWidth">This is a button</a>

Wenn das jQuery-Skript es findet es die HTML injizieren werde notwendig auf eine Schaltfläche mit einem Symbol erstellen und alle notwendigen Ereignisse usw.

Dies ist jedoch unordentlich und erfordert viele lange Klassennamen. Ich würde viel lieber etwas wie das machen ...

Es ist nicht viel kürzer, aber meiner Meinung nach sauberer und erfordert weniger Parsing. Das Problem ist, ich habe ein bisschen Nachforschungen über "Expandos" gemacht und ich bin ziemlich sicher, dass einige Browser es nicht mögen und es wird nicht validiert.

Hat jemand bessere Vorschläge?

Quelle

2009-12-17 jonhobbs

Ich [eine ähnliche Frage gestellt] (http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript) ein paar Monate zurück und gut ein paar gute Antworten. Schau dir auch die Links in Bobinces Kommentar an. –

mögliches Duplikat von [Nicht-Standardattributen für HTML-Tags. Gute Sache? Schlechte Sache? Ihre Gedanken?] (Http: // stackoverflow.com/questions/209428/Nicht-Standard-Attribute-auf-HTML-Tags-Gut-Ding-schlecht-Ding-Ihre-Gedanken) –

Duplikat abgelehnt. –

Gehen Sie voran und verwenden Sie ein Attribut dafür, aber verwenden Sie ein data- Präfix darauf. Attribute mit dem Präfix data- sind explicitly allowed für alle Elemente ab HTML5. Beispiel:

<a href="#" class="Theme-Button" data-theme="{style: 'win2007', icon: 'left', align:'center', fullWidth: true}"></a>

Es funktioniert heute in allen Browsern (obwohl der Prüfer W3 kann sich beschweren, als HTML5-Unterstützung nicht ganz bereit für die Prime-Time), und weil es jetzt Verhalten angegeben, es ist zukunftssicher.

Quelle

2009-12-17 17:28:50

Wie funktioniert das mit, ähem, Internet Explorer? – Felix

@Felix: Ganz gut. Es funktioniert gut mit fast jedem Browser, das einzige wirkliche Problem bei der Definition Ihrer eigenen Attribute war, dass es Validierungsfehler verursachte (wenn Sie validierten), es wurde nirgendwo spezifiziert (und theoretisch hätten UAs sie ignorieren können und nicht machte sie für die JS-Ebene oder für CSS verfügbar, obwohl dies anscheinend nicht der Fall war), und natürlich besteht die Gefahr, mit neu definierten Attributen zu kollidieren. Das Tolle an der HTML5-Formalisierung ist, dass sie diese Probleme auf einen Schlag anspricht. Aber Sie müssen nicht warten, funktioniert jetzt gut, sogar auf IE6. –

Man könnte auch Klassen für diese Art von Sache verwenden.

<a href="#" class="Theme-Button Style-win2007 Icon-left Align-Center FullWidth"></a>

Sie müssen eine Menge von Klassen vor definieren, aber es fühlt sich nicht allzu viel anders als jedes Schlüsselwertpaar Umgang, den Sie erstellen müssen.

Quelle

2009-12-17 17:26:45

Verwenden Sie die ".data" -Eigenschaft von jquery. Das ist sehr praktisch und viele Leute wissen nichts darüber. Weitere Informationen finden Sie unter this link.

Quelle

2009-12-17 17:28:52

Danke Patrick. Wenn Sie meinen Benutzernamen hier und den Namen auf diesem Artikel sehen, werden Sie sehen, dass ich es geschrieben habe :) Leider brauche ich Leute in der Lage, diese Sachen in HTML zu markieren, um später von jQuery analysiert zu werden Es muss irgendwo im HTML-Element sein, nicht in einem Skript. – jonhobbs

Super! heh heh. –

der Link sagt Seite nicht gefunden! – Quethzel

Schauen Sie sich die jQuery .data() Funktion an.

Quelle

2009-12-17 17:28:54 micahwittman

** Und sicher sein, immer fett zu verwenden ** –

Ich benutzte H3, das mutige Entwerfen war SO die Wahl :) – micahwittman

Die Prototype library Träger:

element.store("key","value")

und

element.retrieve("key","value").

Einfach. Nett. Wirksam.

Quelle

2009-12-17 18:01:14

Verwenden Sie xhtml mit benutzerdefinierten Elementen aus einer anderen DTD. oder benutze html5 mit custom data- attributes

Quelle

2009-12-17 18:08:48

Die beste Methode zum Hinzufügen von Metadaten zu HTML-Elementen

Antwort

Verwandte Themen