Bloc-note de développeurs

Faire un interrupteur avec Mootools

Cet 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.

Tag: classe, développement, effet, mootools
Vous avez aimé, alors partagez