Il modo migliore per aggiungere metadati a elementi HTML

Sto provando a mettere insieme un modo per marcare vari componenti in HTML che vengono analizzati da uno script jQuery e creati quando la pagina viene caricata.Il modo migliore per aggiungere metadati a elementi HTML

Per esempio, in questo momento posso mettere quanto segue alla mia pagina ..

<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>

Quando lo script jQuery trova che sarà iniettare il codice HTML necessario per creare un pulsante con un'icona su di esso e tutti gli eventi necessari ecc.

Tuttavia, questo è caotico e richiede molti nomi di classi lunghi. Preferirei mille volte fare qualcosa di simile ...

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

Non è così molto più breve, ma più ordinato a mio parere e richiede meno di analisi. Il problema è che ho fatto un po 'di ricerche su "expandos" e sono abbastanza sicuro che alcuni browser non lo apprezzeranno e non verranno convalidati.

Qualcuno ha qualche suggerimento migliore?

fonte

2009-12-17 jonhobbs

I [fatto una domanda simile] (http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript) qualche mese fa e buona alcune buone risposte. Controlla anche i link nel commento di Bobince. –

possibile duplicato di [Attributi non standard su tag HTML. Buona cosa? Brutta cosa? I tuoi pensieri?] (Http: // StackOverflow.it/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts) –

Duplicato rifiutato. –

Andare avanti e utilizzare un attributo per questo, ma utilizzare un prefisso data- su di esso. Gli attributi con il prefisso data- sono explicitly allowed su tutti gli elementi a partire da HTML5. Esempio:

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

Funziona oggi in tutti i browser (anche se il validatore W3 può lamentare come il suo supporto HTML5 non è ancora pronto per il prime-time), e perché è ora specificato comportamento, è a prova di futuro.

fonte

2009-12-17 17:28:50

Come funziona con, ahem, Internet Explorer? – Felix

@Felix: Va bene. Funziona bene con quasi tutti i browser, l'unico vero problema con definire degli attributi era che ha causato gli errori di convalida (se si stesse convalidando), ma non è stato specificato da nessuna parte (e quindi in teoria, i programmi utente avrebbe potuto li ha ignorati e non li ha resi disponibili per il livello JS o per i CSS, anche se apparentemente nessuno lo ha fatto, e ovviamente c'è il rischio di scontrarsi con attributi appena definiti. Il bello della formalizzazione HTML5 di questo è che risolve questi problemi in un colpo solo. Ma non devi aspettare, funziona bene ora, anche su IE6. –

Uno potrebbe anche utilizzare le classi per questo genere di cose.

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

Dovrete pre definire un sacco di classi, ma non si sente troppo diverso che gestire ogni coppia chiave-valore che si deve creare.

fonte

2009-12-17 17:26:45

Usa la proprietà ".data" di jquery. Questo è molto utile e molte persone non lo sanno.

Vedere this link per ulteriori informazioni.

fonte

2009-12-17 17:28:52

Grazie Patrick. Se guardi il mio nome utente qui e il nome su quell'articolo vedrai che l'ho scritto :) Sfortunatamente, ho bisogno che le persone siano in grado di marcare questo materiale in HTML per essere analizzato da jQuery dopo deve essere da qualche parte nell'elemento HTML, non in uno script. – jonhobbs

Fantastico! heh heh. –

il link dice pagina non trovata! – Quethzel

Vedere la funzione jQuery .data().

fonte

2009-12-17 17:28:54 micahwittman

** ed essere sicuri di utilizzare sempre grassetto ** –

ho usato H3, lo stile audace è stata la scelta di SO :) – micahwittman

I Prototype library supporti:

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

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

Semplice. Bello. Efficace.

fonte

2009-12-17 18:01:14

Utilizzare xhtml con elementi personalizzati mescolati da un altro DTD. o utilizzare HTML5 con custom data- attributes

fonte

2009-12-17 18:08:48

Il modo migliore per aggiungere metadati a elementi HTML

risposta

Problemi correlati