Hola SQLeros, una de las principales necesidades que se tienen cuando estas creando una página dinámica es que aveces necesitamos guardar diversos valores para hacer uso de ellos posteriormente. En algunas ocasiones optamos por usar hiddens, cookies, sessiones, etc. Y en el peor de los casos usamos clases inexistentes, para definir cierto comportamiento o cierto valor haciendo uso de atributos rel de nuestras tags de html. Aveces simplemente agregamos más atributos lo que lleva a un único y peculiar resultado...un HTML no valido... :( por ejemplo digamos que necesitamos agregar los valores:
id y logo en este pedazo de código.
- <img src="imagen.jpg" logo="descripción del logo" rel="imagen1" />
Lo que nos da como resultado un html no valido, la mayoria de los navegadores ignoran los atributos que no conocen.. En este caso logo y rel...
Para solventar este comportamiento en HTML5 se ha agregado el atributo data, el cual nos brinda un comportamiento flexible para almacenar "valores" que necesitemos en nuestra aplicación web. Su uso es sencillo y podemos poner tantos atributos posibles como los necesitemos. Para usarlo necesitamos agregar el atributo a la etiqueta de esta manera:
- Agregamos el prefijo data
- seguido de un guion medio
- y el nombre de la propiedad a crear, p.ej. data-logo , data-id, data-sqleros, data-opciones
ahora nuestra imagen tendrá 4 atributos y para poder hacer referencia a ellos usaremos jQuery y su metodo: "data", si es más que obvio... :)
ahora vamos a ver el ejemplo practico:
Como pueden observar es sencillo usar los atributos de data con html5 y jquery, otra cosa interesante es que podemos tambien tener atributos de datos con objetos json, en este caso se ejemplifica con el atributo data-opciones el cual tiene colorPrincipal y colorFondo.
Espero les sirva y recuerden comentar, Excelente día, hasta la próxima!
Te puede interesar:
No hay comentarios:
Publicar un comentario