Auteur: Serge Boisse
Date: Le 31/03/2023 à 16:03
Type: web/MOC
Tags: 
pub: oui
commentaires: ouiCopier

Des radio boutons en CSS et javascript

Ou comment changer dynamiquement le style d'un composant d'une page pour créer des interfaces qui ont de la gueule

Ce sont des boutons qui se comportent comme des radio-boutons sauf qu'ils ne font pas partie d'une balise FORM mais sont simplement codés en CSS et javascript ! L'astuce, c'est qu'on va changer dynamiquement le style de nos boutons ! Comme un exemple vaut dix mille mots, voici le résultat que vous allez obtenir. Il est compatible avec tous les navigateurs un peu modernes (à partir d'IE 4) :

Si vous pressez un de ces boutons, les autres sont désélectionnés. Regardez le code source de cette page.

Chaque bouton est implémenté sous forme d'un tag "span". On définit deux styles pour ces boutons, "depressed" (sélectionné)  et "raised" (désélectionné). Le handler "onclick" de chaque bouton appelle une fonction  appelée toggleButton(elementObj, idRegex) . Cette fonction boucle sur tous les éléments "span" du document, et pour ceux qui ont un id qui matche l'expression régulière, il positionne sa classe sur "raised". Et ensuite la classe de style du "span" qui a été cliquée est positionnée à "depressed". C'est un peu compliqué, mais avec php on peut se simplifier la vie : par exemple j'ai créé une fonction php "affiche_boutons(array boutons_à_afficher)" qui économise mes petits doigts ! (Attention, c'est juste pour aider, le code de cette page marche uniquement avec javascript et CSS, pas besoin en théorie de php)

La fonction toggleButton provoque aussi l'affichage du numéro du bouton dans le champ texte (input, en fait). Pour récupérer dans une fonction quel radio bouton a été sélectionné comme ci-dessus, cette fonction appelle "afficher_bouton_selectionne" (voir le code source de la page), qui boucle sur tous les champs "span", filtre ceux qui concernent nos radio-boutons au moyen d'une expression régulière, et trouve celui qui a le style "depressed".

Mais on ne s'arrête pas là parce qu'on va aussi changer dynamiquement le style d'un tag "table" (ici on change la couleur de fond) Ce que j'ai fait, c'est que chaque clic sur un bouton appelle, en plus de toggleButton, une fonction "changeStyle" qui va se charger de modifier dynamiquement le style de la table ! En principe, il n'y a pas de limite à cela, vous pouvez modifier dynamiquement n'importe quel attribut de n'importe quel élément défini dans votre feuille de style !

Cool, non ?