Faire un interrupteur avec Mootools

Interrupteur On/OffCet article peut paraître d’un intérêt limité et en effet, je l’écris suite à une demande formulée par un lecteur de ce blog qui crée un site pour un électricien.

Cet article nécessite l’utilisation d’un addon Color de Mootools.



Utilisation de la classe Interrupteur

La classe Mootools à utilisé pour réaliser cet interrupteur a été développée par mes soins. Vous pouvez la télécharger, la modifier et l’utiliser comme bon vous semble.

var inter = new Interrupteur({
	div: $('la_div_a_eteindre'),
	interrupteur: $('l_interrupteur'),
	color: '#C00000'
});
 
// Vous pouvez à tout moment modifier la couleur "allumée" de la div
inter.setColor('#FFFFFF');


div

Défini quel est l’élément HTML à allumer ou éteindre.

interrupteur

Défini quel élément doit capturer le clic de la souris.

Doit être présent en CSS sous 2 formes (on et off) :

#inter{
...
}
#inter.off{
...
}

color

Couleur sous forme hexadécimal (exemple : #FFFFFF).


Télécharger

Vous pouvez bien sûr retrouver un exemple de l’utilisation de cette classe que vous pouvez réutiliser.

Test en ligne

Vous pouvez aussi le tester directement sur internet.

Tagués avec : , , ,
Publié dans Mootools

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*