Bouton ou commande à deux états

Etude de cas

L'idée

Nous utilisons un bouton pour passer une commande à une page Web, et nous voulons changer le bouton pour passer à l'état opposé quand la commande est exécutée, pour pouvoir envoyer la commande contraire.
Les exemples que nous utilisons sont les commandes "résumer" et "développer" permattant de réduire ou étendre le contenu d'une page selon ce que demande le lecteur.
Les examples requièrent la bibliothèque Ajax Extensible qui est fournie sur ce site, et qui est gratuite et open source.

Changer le bouton

Le code à insérer dans la page Web est très simple et ne requiert aucune programmation:

<div onclick="switchButton(this);"> 
  <img src="develop.gif" /> 
</div>

C'est une balise standard pour insérer un bouton avec un attribut pour appeler une fonction.
Il faut aussi inclure la fonction JavaScript dans la section head de la page:

<script src="oneButton.js" type="text/JavaScript"></script>

Rien d'autre n'est requis pour créer un bouton à deux états.
Pour avoir une démo, il vous faut:
- La page demo-button.html.
- Les images develop.gif et summarize.gif.
- Le fichier JavaScript oneButton.js.

• Essayer la démo.

Texte à deux états

Le code à insérer dans la page est une simple balise div ou span pour délimiter le texte et ajouter un évèment qui appelle la fonction:

<div onclick="switchText(this);"> Develop </div>

Il nous faut aussi inclure la fonction JavaScript:

<script src="oneText.js" type="text/JavaScript"></script>

Pour exécuter la démo nous avons besoin de:
- La page demo-text.html.
- Le fichier JavaScript oneText.js.

• Essayer la démo.

(c) 2006-2008 Xul.fr
Licence: Vous êtes libre d'utiliser le code de ces tutoriels pour motoriser votre propre site. Soyez aimable de ne pas placer les tutoriels ou autres fichiers sur un autre site, placez plutôt un lien sur l'article. Mais vous pouvez imprimer les pages et les distribuer avec le code à des fins d'enseignement.