1. Inicio
  2. Pregunta y respuesta
  3. La mejor manera de agregar metadatos a los elementos HTML

La mejor manera de agregar metadatos a los elementos HTML

2009-12-17 27 views
15

Estoy tratando de armar una forma de marcar varios componentes en HTML que se analizan mediante un script jQuery y se crean cuando se carga la página.La mejor manera de agregar metadatos a los elementos HTML

Por ejemplo, en el momento en que puedo poner lo siguiente en mi página ..

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

Cuando el script jQuery encuentra que va a inyectar el HTML necesario para crear un botón con un icono en él y todos los eventos necesarios, etc.

Sin embargo, esto es complicado y requiere una gran cantidad de nombres largos de clase. Me gusta mucho más Prefiero hacer algo como esto ...

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

No es que mucho más corta pero más ordenado en mi opinión y requiere menos de análisis. El problema es que investigué un poco sobre "expandos" y estoy bastante seguro de que a algunos navegadores no les gustará y no se validará.

¿Alguien tiene mejores sugerencias?

Fuente

2009-12-17 jonhobbs

+0

I [hizo una pregunta similar] (http://stackoverflow.com/questions/1600106/storing-arbitrary-info-in-html-tags-for-javascript) hace unos meses y bueno algunas buenas respuestas También mira los enlaces en el comentario de bobince. –

+0

posible duplicación de [Atributos no estándar en etiquetas HTML. ¿Buena cosa? ¿Cosa mala? Tus pensamientos?] (Http: // stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts) –

+0

Duplicado rechazado. –

Respuesta

25

Siga adelante y use un atributo para esto, pero use un prefijo data- en él. Los atributos con el prefijo data- son explicitly allowed en todos los elementos a partir de HTML5. Ejemplo:

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

Funciona hoy en día en todos los navegadores (aunque el validador W3 puede quejarse como su soporte HTML5 aún no está listo para el prime-time), y porque ahora se especifica el comportamiento, es a prueba de futuro.

Fuente

2009-12-17 17:28:50

+0

¿Cómo funciona esto, ejem, Internet Explorer? – Felix

+3

@Felix: Bien. Funciona bien con casi cualquier navegador, el único problema real con la definición de sus propios atributos fue que causó errores de validación (si estaba validando), no se especificó en ningún lugar (y, en teoría, los UA podrían haberlos ignorado y no los puso a disposición de la capa JS o CSS, aunque aparentemente ninguno lo hizo) y, por supuesto, existe el riesgo de colisionar con los atributos recién definidos. Lo mejor de la formalización HTML5 de esto es que soluciona esos problemas de un plumazo. Pero no tienes que esperar, funciona bien ahora, incluso en IE6. –

0

También se podrían usar clases para este tipo de cosas.

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

Tendrá que definir previamente un montón de clases, pero no se siente demasiado diferente de manejar cada par de valores clave que usted tiene que crear.

Fuente

2009-12-17 17:26:45

2

Utilice la propiedad ".data" de jquery. Esto es muy útil y muchas personas no lo saben.

Consulte this link para obtener más información.

Fuente

2009-12-17 17:28:52

+2

Gracias Patrick. Si mi nombre de usuario aparece aquí y el nombre en ese artículo, verá que lo escribí :) Desafortunadamente, necesito que las personas puedan marcar estas cosas en HTML para ser analizadas por jQuery más tarde, así tiene que estar en algún lugar del elemento HTML, no en un script. – jonhobbs

+0

¡Impresionante! je je. –

+0

¡No se ha encontrado la página Link say! – Quethzel

0

Los Prototype library soportes:

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

y

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

Simple. Bonito. Eficaz.

Fuente

2009-12-17 18:01:14

Cuestiones relacionadas

 Cuestiones relacionadas