I – Les différents outils à notre disposition
Avant tout, faisons une liste des quelques outils que nous allons utiliser ici.
1: Du vocabulaire
- Un noeud : un noeud est une balise ou une paire de balises html. <div>contenu</div> est par exemple un noeud.
- Un string : Un string est une chaine de texte. Sa marque distinctive est qu’elle est entourée de quotes simples (‘string’), ou doubles (« string »). C’est ni plus ni moins que du texte.
- Un Event : Des events javascripts sont des évènements (d’où le nom) qui peuvent être surveillés. Par exemple, cliquer sur quelque chose est un évènement. On peux l’écouter en ajoutant comme attribut onClick= »some_js_here » à une balise. Quand quelqu’un cliquera sur l’élément, le code (ici some_js_here) sera executé. Vous pouvez essayer avec onClick= »alert(‘hello world’) ».
2: Les outils de modifications de classes de dojo
dojo.addClass(target, class) permet d’ajouter une classe à un noeud. target peut être un string (dans ce cas là, c’est l’id du noeud), ou directement un noeud.
dojo.removeClass(target, class) permet de supprimer une classe à un noeud.
dojo.toggleClass(target, class) permet d’ajouter une classe à un noeud si elle n’y est pas et la retirer si elle est déjà présente.
3: Quelques events
onClick est l’écouteur des clics de souris.
onMouseOver est l’écouteur de survol d’un élément par la souris.
onMouseOut est l’écouteur de sortie d’un élément par la souris.
II – Préparation du terrain
Pour pouvoir utiliser dojo, il faut avant tout l’importer. Pas besoin de s’embêter à le télécharger, nous allons pouvoir utiliser celui qui est disponible en ligne. Ajoutez juste ceci dans votre head.
<script src= »http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js » type= »text/javascript »></script>
III – Le vif du sujet
Alors, qu’allons nous essayer de faire ici? nous allons faire une div quelque part et à son survol, nous allons faire apparaître une petite bulle d’explication à son sujet.
a – Premièrement, créeons le HTML.
(je suppose là que vous avez déjà l’attirail complet doctype html head(avec dojo dedans) et body, bien sur).
Créez l’élément qui doit être survolé. Ça peut être un champ, un p avec du texte, une image de point d’interrogation, ce que vous voulez. Créez ensuite la ‘bulle’ ça peut là aussi être un simple p ou un span, une image, là aussi, vous êtes libres. Pour simplifier les choses en CSS et JS ensuite, donnons lui une id, par exemple:« tooltip ».
b – Maintenant, le CSS.
Pour #tooltip, positionnez la bulle ou vous voulez, puis mettez lui une opacity de 0. Je vous conseille aussi de mettre quelques lignes de transitions CSS3, pour que ça soit plus sympa.
Pour #tooltip.visible, mettez une opacity à 1. Notre div tooltip est maintenant invisible, mais quand on lui aura ajouté la classe "visible" , elle apparaitra, puis redisparaira quand on lui la retirera.
Un tout petit peu de JS.
Sur l’évènement qui doit être survolé, ajoutons deux évènements :
onMouseOver= »dojo.addClass(‘tooltip’, ‘visible’) »
onMouseOut= »dojo.removeClass(‘tooltip’, ‘visible’) »
je met un exemple pour ceux chez qui ça reste flou:
<div onmouseover= »dojo.addClass(‘tooltip’, ‘visible’) » onmouseout= »dojo.removeClass(‘tooltip’, ‘visible’) » >Je suis le texte à survoller</div>
Testez votre page: Normalement, au survol de l’élément, la toolip gagne la classe visible, et apparait. Puis, si la souris sort de l’élément, la tooltip perd cette classe et redisparaît.
IV – Le mot de la fin
Voilà, vous avez touché au modifications du DOM (en gros, l’ensembles des noeuds) et des classes en javascript. Cet exemple n’était peut être pas très impressionnant, mais je vous promet que cette technique, surtout depuis l’arrivée du CSS3, est réellement très pratique.
Bonne journée et à bientôt pour un nouvel article.
