Journal d'un Terrien

Web log de Serge Boisse

On line depuis 1992 !

Publicité

Si cette page vous a plu, Copiez son adresse et partagez-la !
http://sboisse.free.fr/technique/astuces-webmasters/radio-boutons-CSS-javascript.php

radio-boutons-CSS-javascript
Metadata
Serge Boisse
Le 31/03/2023 à 16:03
web/MOC
oui
oui

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) :

bleu rouge vert blanc


Changez ma couleur de fond !

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 ?

Publicité
Commentaires

Commentaires (2) :

Page : [1] 

Husna
Le 05/03/2016 à 15h15
je kiff cette article ! :D Merci!

Fabien
Le 10/12/2010 à 11h12
Merci pour ce code très utile ! On n'en perçoit l’intérêt qu'après coup, mais il est écrit d'une manière tellement propre que c'en est facile à adapter. Merci


Ajouter un commentaire (pas besoin de s'enregistrer)

Pseudo :
Message :


image de protection
En cliquant sur le bouton "Envoyer" vous acceptez les conditions suivantes : Ne pas poster de message injurieux, obscène ou contraire à la loi, ni de liens vers de tels sites. Respecter la "netiquette", ne pas usurper le pseudo d'une autre personne, respecter les posts faits par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !
Ah oui : le bbcode et le html genre <br>, <a href=...>, <b>b etc. ne fonctionnent pas dans les commentaires. C'est voulu.
< Retour en haut de la page