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.