jQuery: usare gli attributi data di HTML5 invece dell'attributo rel

Short link

Il problema principale dell'attributo rel in HTML5 è che accetta solo pochi valori considerati validi. Notiamo invece come questo attributo venga usato erroneamente da molti siti e soprattutto da molti plugin per jQuery per stabilire delle relazioni tra elementi o per aggiungere dei dati agli elementi stessi. La soluzione, invece, è quella di usare gli attributi personalizzati HTML5 di tipo data-* per questo scopo.

Un tipico esempio sono i link di paginazione di uno slideshow. Solitamente per stabilire un collegamento con una slide precisa viene utilizzata questa struttura:


<div id="slideshow-paging">
	<a href="#" rel="0">1</a>
	<a href="#" rel="1">2</a>
	<a href="#" rel="2">3</a>
</div>

In questo caso il valore dell'attributo rel corrisponde all'indice della slide di riferimento. Tuttavia, questa struttura non è valida e solleverà un errore di validazione.

Ecco invece un esempio valido:


<div id="slideshow-paging">
	<a href="#" data-slide="0">1</a>
	<a href="#" data-slide="1">2</a>
	<a href="#" data-slide="2">3</a>
</div>

In questo caso l'attributo data-slide svolge la stessa funzione dell'attributo rel, ma in questo caso la struttura generata è valida.

jQuery fornisce il metodo .data() per leggere il valore di questo tipo di attributi:


$('a', '#slideshow-paging').click(function(e) {
	e.preventDefault();
	var $a = $(this);
	var currentSlideIndex = $a.data('slide');
	var currentSlide = $('div.slide').eq(currentSlideIndex);
	$('#slideshow-wrapper').animate({
		left: - currentSlide.position().left
	}, 1000);
});

Il metodo .data() non ha bisogno del prefisso data- ma solo del nome dell'attributo personalizzato (slide). Come si può notare, questo approccio è molto più semantico e soprattutto non crea problemi con la validazione HTML.