Bouton à deux états et définitions dans le texte

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" permettant de réduire ou étendre le contenu d'une page selon ce que demande le lecteur.
Les exemples requièrent la bibliothèque Ajax Extensible qui est fournie sur ce site, 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="developper.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.

Démonstration

C'est une démo écrite en JavaScript pour montrer un bouton a deux états.
C'est un framework Ajax permettant de contruire des pages extensibles.

Code source de la page

<style>
.aep { color: #009; 	}
</style>

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

<div onclick="switchButton(this);">
   <img src="develop.gif" width="62" height="16" align="middle">
</div>

<div id="x2" style="display:none;">un langage de script pour le web</div>

Une démo écrite en <span id="aep" name="x2" class="aep" onclick="quietVerbose(this);" >JavaScript</span>
 pour montrer un bouton a deux états. 
C'est un  <span id="aep" src="definition.txt" class="aep" onclick="quietVerbose(this);" > framework Ajax</span> 
 permettant de contruire des pages extensibles. 

Code du script oneButton.js

var buttonDevelop = "developper.gif";
var buttonSummarize = "resumer.gif";
function switchButton(element)
{
  var d = buttonDevelop.length;
  var s = buttonSummarize.length;
  var image = element.firstChild;
  var name = image.getAttribute("src");
  var iname = name.substr(name.length - d, d);

  if(iname == buttonDevelop)
  {		
    image.setAttribute("src", buttonSummarize);
    develop();
    return;				
  }
  iname = name.substr(name.length - s, s);
  if(iname == buttonSummarize)
  {
    image.setAttribute("src", buttonDevelop);
    summarize();
    return;				
  }
}

Code complet de la démo dans l'archive.

Téléchargement

• L'archive avec les démos et les scripts utilisés.

Forum

• Bouton à 2 états et commande domotique.