metadatos ejemplos body attribute agregar jquery html css expando

jquery - ejemplos - title html



La mejor manera de agregar metadatos a elementos HTML (6)

Continúe y use un atributo para esto, pero use un prefijo de data- en él. Los atributos con los data- del prefijo se permiten explícitamente 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 todos los navegadores (aunque el validador W3 puede quejarse ya que su compatibilidad con HTML5 no está lista para el horario estelar), y debido a su comportamiento específico, está preparado para el futuro.

Estoy tratando de armar una forma de marcar varios componentes en HTML que se analizan con un script jQuery y se crean cuando se carga la página.

Por ejemplo, en este momento 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 lo encuentre, inyectará el html necesario para crear un botón con un ícono y todos los eventos necesarios, etc.

Sin embargo, esto es complicado y requiere muchos nombres de clase largos. Prefiero hacer algo como esto ...

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

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

¿Alguien tiene alguna sugerencia mejor?

La biblioteca de prototipos soporta:

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

y

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

Sencillo. Bonito. Eficaz.

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 muchas clases, pero no se siente muy diferente de manejar cada par de valores clave que tiene que crear.

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

Vea este enlace para más información.