Il modo migliore per aggiungere metadati a elementi HTML

Sto cercando di mettere insieme un modo per marcare vari componenti in HTML che vengono analizzati da uno script jQuery e creati quando la pagina viene caricata.

Ad esempio, al momento posso inserire quanto segue nella mia pagina ..

This is a button 

Quando lo script jQuery lo trova, verrà iniettato l’html necessario per creare un pulsante con un’icona su di esso e tutti gli eventi necessari, ecc.

Tuttavia, questo è disordinato e richiede un sacco di nomi di classi lunghe. Preferirei fare qualcosa del genere …

  

Non è molto più corto ma più ordinato secondo me e richiede meno 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?

Vai avanti e usa un attributo per questo, ma usa un prefisso data- su di esso. Gli attributi con i data- del prefisso sono esplicitamente consentiti su tutti gli elementi a partire da HTML5. Esempio:

  

Funziona oggi su tutti i browser (anche se il validatore W3 potrebbe lamentarsi perché il suo supporto HTML5 non è ancora pronto per il prime time), e poiché ora ha un comportamento specifico, è a prova di futuro.

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

Vedi questo link per maggiori informazioni.

Guarda la funzione jQuery .data () .

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

  

Dovrai pre definire un sacco di classi, ma non sembra molto diverso dal gestire ogni coppia di valori chiave che devi creare.

La libreria Prototype supporta:

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

e

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

Semplice. Bello. Efficace.

Usa xhtml con elementi personalizzati mescolati da un altro DTD. oppure utilizzare html5 con attributi data- personalizzati