Comment créer un interrupteur marche/arrêt avec Javascript/CSS?

Question

Je veux avoir un interrupteur coulissant. À gauche serait Off et à droite serait On. Lorsque l'utilisateur bascule l'interrupteur, je veux que la partie « curseur » glisse de l'autre côté et indique qu'il est éteint. Je pourrais ensuite avoir un callback qui prend en entrée l'état de l'interrupteur basculant afin que je puisse agir en conséquence.

Une idée de comment faire cela?

Answer 1

Découvrez ce générateur : On/Off FlipSwitch

vous pouvez obtenir différents styles et c'est uniquement en CSS - pas de javascript !

Answer 2

Vous voulez dire quelque chose comme les cases à cocher d'iPhone ? Essayez le script Thomas Reynolds' iOS Checkboxes :

Une fois que les fichiers sont disponibles sur votre site, activer le script est très facile :

...

$(document).ready(function() {
  $(':checkbox').iphoneStyle();
});

Résultats :

Answer 3

Utilisation de JavaScript simple

      .on  { background:blue; }
      .off { background:red; }

        function toggleState(item){
           if(item.className == "on") {
              item.className="off";
           } else {
              item.className="on";
           }
        }

Utilisation de jQuery

Si vous utilisez jQuery, vous pouvez le faire en utilisant la fonction toggle, ou en utilisant la fonction toggleClass à l'intérieur du gestionnaire d'événements click, comme ceci :

$(document).ready(function(){
    $('a#myButton').click(function(){
        $(this).toggleClass("btnClicked");
    });
});

En utilisant les effets jQuery UI, vous pouvez animer les transitions : http://jqueryui.com/demos/toggleClass/

Answer 4

J'ai juste écrit une implémentation ios 7 en pur CSS. Voici une démo et le repo Github.

Utilisation :

À votre santé.

Answer 5

Réponse initiale de 2013

Si vous n'êtes pas contre quelque chose lié à Bootstrap, un excellent Bootstrap Switch (non officiel) est disponible.

Il utilise des boutons radio ou des cases à cocher comme interrupteurs. Un attribut de type a été ajouté depuis la version 1.8.

Le code source est disponible sur Github.

Note de 2018

Je ne recommanderais pas d'utiliser ce genre d'anciens boutons interrupteurs maintenant, car ils semblaient toujours souffrir de problèmes d'utilisabilité comme le soulignent de nombreuses personnes.

Veuillez envisager de jeter un œil aux interrupteurs modernes comme ceux-ci.