21 06 / 2011

Html5, jQuery et les Data Attributes [maj]

jquery html5 data-attribute

Lorsque vous faites un petite application html/js (avec jQuery par exemple), dans laquelle vous avez besoin d’interaction entre des éléments du DOM comme des boutons et un autre élément, on souhaite souvent associer des attributs. Introduction au data-attributes.

Data Attributes ?

Dans l’exemple d’une playlist, vous voulez qu’un clic de l’internaute, l’application lance la lecture du titre ou sur un autre bouton mettre en favoris le titre, etc. Dans plusieurs cas, nous avons besoin de passer un certain nombre de valeur à notre fonction : l’ID de la playlist, l’ID de l’artiste, l’ID du titre, l’ID de… et cetera, et cetera. De plus, vous vous dites que vous ne souhaitez pas utiliser un onclick sur le bouton dans lequel vous auriez pu passer toutes ces valeurs associées à l’appel de la fonction, non ! vous voulez externaliser dans votre fichier javascript l’appel de la fonction grâce à un listener. Ce qui est une bonne chose pour plusieurs raisons, mais je ne vais pas rentrer dans un argumentaire ici.

Comment faire ?

Et là, vous vous dites que vous avez entendu parlé des custom data attributes quelque part, sur un site qui parlait d’HTML5… Tiens là par exemple : http://devlint.fr/blog/html5-microformat-microdata. Vous faîtes une recherche également du côté du W3C pour être sûr de vous, n’est-ce pas ?

Bien. Vous savez donc que vous pouvez partager des données (data) de façon complètement invisible pour l’internaute, mais tout à fait utile pour votre javascript.

Ainsi, cela vous parait maintenant très logique (pourquoi pas plus tôt ???) d’écrire une ligne html comme celle-ci :

<button class="addToFavorite" data-playlist="12" data-artiste="60" data-titre="04">
Ajouter à mes favoris
</button>

Vous avez maintenant directement dans le DOM les éléments dont vous avez besoin, et de façon claire et lisible, sans passer par du JSON et ses parser, sans passer dans du XML, parce que vous voulez garder tout cela aussi simple que possible.

Ok, mais comment utiliser tout cela ?

Autrement dit, vous vous posez la question du support des navigateurs (ben oui, c’est de l’HTML5 tout de même !).

Réponse : La plupart des navigateurs ne supportent pas les custom data attributes. Mais on s’en fiche. Notre objectif ici, n’est pas d’utiliser le potentiel des navigateurs, du moment que l’on retrouve nos données insérées dans le DOM (et c’est le cas, logique, c’est de l’HTMl…), mais de nous servir du super pouvoir de notre librairie préférée : jQuery ! En effet, les dernières versions de jQuery (depuis la v.1.4.3) ont la capacité de lire automatiquement tous les data attributes de notre balisage et les rendre accessibles via la fonction jQuery.data () comme vous pouvez le voir dans la doc de jQuery.

C’est génial parce que maintenant nos données et le balisage sont complètement séparés de notre code Javascript.

Vous pouvez aller plus loin, avec cet autre exemple :

<ul id="locations">
  <li><a title="Lyon" href="#" data-role="localisation" data-options='{"id":"1", "lat":"45.766242", "lon":"4.835844", "title":"Lyon"}'>Lyon, France </a></li>
  <li><a title="Paris" href="#" data-role="localisation" data-options='{"id":"2", "lat":"48.861395", "lon":"2.35136", "title":Paris"}'>Paris, France</a></li>
</ul>

et dans notre fonction JS, tada :

alert( $('#locations li:first-child a').data('options').lat);

Vous récupérez les infos que vous voulez, aussi simplement que cela. Et maintenant, vous commencez à entrevoir les multiples possibilités offertes par les custom data attributes, tout en sachant que cela ne s’arrête pas là… bien sûr !

Au passage, voici un autre exemple tout bête d’utilisation de jQuery et des data-attributes en HTML5 : http://devlint.fr/labs/datatip.html

Petite mise à jour (24/06/2011)

Quelques liens de tutoriels ou de scripts qui se basent sur les data attributes :

Tout cela pour vous dire que les data-attributes, sans être une révolution complète, vont permettre une fois de plus d’améliorer la lisibilité et le bon usage d’html dans nos pages : plus besoin d’utiliser des class, title ou rel à mauvais escient…


Vous avez lu ça aussi ?

Suivant Précédent