Cada dia es mas necesario conocer HTML 5 .Sin embargo el problema mas habitual con él es que hay demasiadas novedades y es realmente difícil de abarcarlo de forma completa. Hoy voy a escribir sobre una de sus características que a mi me parecen mas importantes.El uso de atributos data.
Usando JQuery
Para entender de una forma sencilla para que se usan los atributos data vamos construir un ejemplo con JQuery que nos ayude a explicar el concepto. Imaginemos que disponemos de una lista de elementos en HTML que contiene información sobre personas.
Podemos ver que en la información se incluye el nombre y los apellidos así como un número que digamos es la clave primaria de cada registro. Para poder trabajar con la aplicación necesitamos que cuando pulsemos en cada li de la lista se seleccione esa clave primaria y se muestre en un alert. Vamos a ver el código html. necesario.
</pre> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <ul> <li>1,Java</li> <li>2,.NET</li> <li>3,PHP</li> </ul> </body> </html> <pre>
JQuery y JavaScript
Para poder implementar la funcionalidad solicitada vamos a usar JQuery + Javascript .Necesitamos generar los eventos en las filas <li> y luego leer su contenido y realizar un filtro con split por ejemplo.
$(document).ready(function() {
$("li").click(function() {
alert($(this).text().split(",")[0]);
});
});
Añadido el código que es sencillo de entender podemos ver en ejecución el programa cuando pulsamos sobre el primer item de la lista:
HTML5 Data Attributes
Aunque parece que hemos solventado el problema ,la solución es mejorable ya que puede ser que mas adelante cambie el caracter de separación “,” o que incluso nos encontremos con claves primarias que incluyan el caracter “,” etc etc . Para solventar el problema podemos hacer uso de HTML 5 Data Attributes que nos permiten definir nuevos atributos en la página con la condición de que comiencen por la palabra “data-“. En nuestro caso vamos a declarar el atributo de “data-id”.
De esta forma por mucho que cambie el contenido que se muestra por pantalla siempre tendremos almacenadas las claves primarias a nivel de atributos data. Para ello usaremos la función data de JQuery obteniendo el mismo resultado.
</pre>
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function() {
alert($(this).data("id"));
});
});
</script>
</head>
<body>
<ul>
<li data-id="1">1,Java</li>
<li data-id="2">2,.NET</li>
<li data-id="3" >3,PHP</li>
</ul>
</body>
</html>
<pre>
Aunque nos parezca una característica sencilla de html5 quizas es también una de las mas versátiles y nos ayudará en muchas situaciones.
para accecer al data-id y cambiar el estilo aplicando jquery como seria?
podrias usar attr() o podrías usar data() los dos deberían valer
[…] Otros artículos relacionados : LocalStorage y LoDash , HTML Data Atributos […]
[…] artículos relacionados: HTML5 Data Attributes , JavaScript y Threads , HTML […]
Burn día, tengo una duda, en un input text hice dos datas. Como ejemplo son dos nombres. Estos los quiero para que al momento que escriba un nombre, con jquery y Javascript valide si coinciden con algunos de estos dos nombres almacenados con data. Pero Únicamente me valida 1. El primero el segundo data no lo reconoce. Estoy utilizando el each para cada input y en el condicional if, estoy comparando con Or y and. Los dos datas y nada. Alguna sugerencia. Gracias excelente tu post. Saludos
Uhmm prueba a almacenarlos como dos tipos de atributos distintos data con $(“#input”).attr(“data-datoa”) y (“#input”).attr(“data-datob”) esto es mas simple pero debiera funcionar siempre 🙂
mm.. okk, deja probar de esa manera,
Graciass
de nada 😉
Hola
la parte del data-id es .. asi como reservada? o es modificable ?
digamos:
data-identificador
quedando de esta manera:
$(this).data(“identificador”)
ooo
custom-variable
quedando de esta manera:
$(this).custom(“variable”)
??
todo esto es posible?
Puedes modificarlo de la siguiente forma $(this).data(“id”, “nuevo”); .Lo que sucede es que aunque lo modifica en algunas herramientas que muestran el arbol DOM no se refleja la actualización pero si desde javascript vuelves a solicitar los datos con $(this).data(“id”) te devolverá el nuevo valor
creo que lo que pregunta es si se puede tener algo como:
1,Java
y usarlo con
$(this).data(“identificador”)
y siendo mas flexible aún:
1,Java
y usarlo con
$(this).custom(“identificador”)
se puede alguna de las 2?
Quieres decir meter en el data-id=”1,java” ? .Eso si es posible 🙂 . Lo otro directamente no quizas utilizando algun plugin
voy de nuevo con el código que lo corto y quedó ilegible
decía si se puede tener algo como
li data-identificador=”1″>1,Java /li
(saque los “1,Java /li
y usarlo con
$(this).custom(“identificador”)
sigue saliendo mal 🙁
[li data-identificador=”1″]1,Java [/li]
y usarlo con
$(this).data(“identificador”)
o mas flexible
[li custom-identificador=”1″]1,Java [/li]
y usarlo con
$(this).custom(“identificador”)
Ahora te he entendido mejor .No te lo recomiendo ya que no cumplirias con la norma de HTML 5 puede que en algunos casos los navegadores traguen. Ademas lo que no podrás hacer es usar $(this).custom . Eso si que no esta soportado por JQuery.