Overblog
Suivre ce blog Administration + Créer mon blog
10 février 2010 3 10 /02 /février /2010 00:01

Un peu de technique facile pour fabriquer une boîte de dialogue simplette qui informe / amuse / agace le lecteur. Quelques idées d'utilisation aussi, deux ou trois finesses de JavaScript, mais vous faites bien la cuisine qui vous plaît…

Cerise sur le gâteau : tout cet article est utilisable dès le niveau  Confiance  d'un blog OB.

Boîte de dialogue simple

Cliquez donc sur ce lien, à vos risques et périls.

Comment est-ce fabriqué ? Comme ceci :

 <a href="#nogo" onclick="alert('Attendez encore un peu');return false;">Étape suivante</a> 

Rien de bien sorcier, on ajoute au lien un onclick très bref, composé de deux instructions :

  1. alert('le texte du message'); provoque l'affichage de la boîte de dialogue et
  2. return false; assure que le href du lien ne sera pas suivi après le clic (avec return true; il le serait).
    Je reconnais qu'ici c'est un peu  ceinture ET bretelles , puisque le lien ne mène à rien, mais ça ne peut pas nuire – on en reparle dans la section suivante.

Voilà tout. Notez aussi que rien, mais alors rien, ne vous interdit de mettre un onclick sur autre chose qu'un lien : par exemple une image, un bout de texte quelconque… ce qui vous fait envie. Cliquez donc où vous voudrez dans la liste qui précède…

Ah, je sens venir une question ! Comment se fait-il que le curseur prenne la forme d'une main quand il survole cette liste ? Réponse : voilà le code source de la balise ol qui ouvre cette liste :

 <ol style="cursor:pointer" title="cliquez donc dans cette liste" onclick="alert('Ben oui, on peut cliquer sur une liste...');"> 

Boîte de dialogue à deux choix : oui-non

Voici un exemple : Voulez-vous consulter le plan du site ? (mais non, vous ne risquez rien  ! Vous pouvez même choisir la réponse qui vous plaît)

La fabrication en est un tout petit peu plus subtile.

D'abord, au lieu de alert('un message') on utilise confirm('un message') qui affiche une boîte à deux choix, boîte aussi rudimentaire que la précédente. Bon.

Ensuite, nouveauté brillante, ce confirm renvoie une valeur qui dépend du bouton choisi : true (vrai) si on a cliqué sur OK ou l'équivalent, false (faux, hé oui) si on a cliqué sur l'autre ou fermé la boîte sans choisir.

Cette valeur, on peut bien sûr la récupérer dans une variable, tester cette variable, se lancer dans des traitements de haut vol selon les cas, etc. . Pfouuuu… Ici on ne veut qu'un choix simple :

  • aller au plan du site
  • ou ne pas y aller.

La question posée par la boîte est ainsi rédigée que confirm renvoie la valeur

  • true si on veut y aller (bouton OK)
  • ou false si on ne veut pas (bouton Cancel).

Or, justement, voyez comme la vie est bien faite et cet article aussi, si le onclick attaché à un lien renvoie

  • true on suit le lien,
  • false on ne suit pas ce lien.

Cette longue explication pour enfin vous donner le code source du lien ci-dessus :

 <a target="_blank" href="plan-du-site.html" onclick="return confirm('Vous le voulez vraiment ?');"> Voulez-vous consulter le plan du site ?</a> 

Une seule instruction : on exploite directement dans le return la valeur résultant de confirm.

Pas plus que la précédente, cette technique n'est réservée aux liens. Avec un peu d'imagination vous pouvez certainement obtenir des effets rigolos…

Boîte de dialogue à deux choix : nouvelle fenêtre ou pas

Tiens justement, en voilà un : l'exemple précédent proposait de lire ou non une nouvelle page, mais toujours dans une nouvelle fenêtre. Forcer l'ouverture dans une nouvelle fenêtre n'est pas, en soi, bien difficile :

 <a href="quelque chose" target="_blank" >Cliquez donc</a> 

Mais on peut vouloir donner le choix au lecteur : nouvelle fenêtre ou pas ? Autrement dit, définir le target par JavaScript. Rassurez-vous, la réponse est courte :

 <a href="quelque chose" onclick=" this.target=confirm('Nouvelle fenêtre ?') ? '_blank' : ''; return true; " >Cliquez donc</a> 

La fin, d'abord : return true; parce que, quelle que soit la réponse, on veut l'ouvrir ce fichu lien !

La première instruction, quant à elle, redéfinit this.target : this désigne le lien sur lequel on clique et this.target désigne le target de ce lien (tout comme this.href en désignerait le href). La construction un peu hermétique avec un point d'interrogation et un double point est un calcul avec test incorporé :

  1. on évalue d'abord l'expression écrite avant le point d'interrogation. Ici c'est un appel à confirm. La question est donc posée et, selon le bouton cliqué, la valeur résultante est true ou false ;
  2. si cette expression vaut true le résultat du calcul est ce qui est écrit entre ? et : : ici, la chaîne'_blank' ;
  3. si l'expression vaut false le résultat du calcul est ce qui écrit après le :, ici une chaîne vide (attention ! j'ai écrit deux apostrophes simples, pas une seule apostrophe double !).

Selon le bouton sur lequel on aura cliqué dans la boîte, this.target vaudra donc _blank ou rien de spécial. En clair : nouvelle fenêtre ou même fenêtre.


Tout ceci, vous le voyez, n'est pas de la programmation très raffinée mais permet d'améliorer un peu le ragoût sans trop d'efforts.

Archives