Journal d'un terrien

Web log de Serge Boisse

On line depuis 1992 !

Recherche personnalisée

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  appellée toggleButton(elementObj, idRegex) . Cette fonction boucle sur tous les élements "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 dun 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 ?


Vous voulez creer un blog wordpress et vous ne savez pas comment faire ? Cette formation est faite pour vous ! Comment créer pas à pas un blog d'aspect professionnel, et qui vous rapportera même de l'argent !
Allez hop, voici deux livres GRATUITS pour les webmasters. Cadeau !




Et pendant qu'on y est, si vous avez un site Wordpress, Ce plugin magique vous permettra de vendre automatiquement les milliers de produits du catalogue 1Tpe sur votre site et d'empocher des commissions tous les jours !

Journal d'un terrien

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 fait par les autres. L'auteur du site se réserve le droit de supprimer un ou plusieurs posts à tout moment. Merci !
Ah oui : le html genre <a href=...>, <b>b etc. ne fonctionne pas dans les commentaires. C'est voulu.
< Retour en haut de la page