¿Cómo crear un interruptor de encendido/apagado con Javascript/CSS?

Quiero tener un interruptor deslizante. A la izquierda estaría Off y a la derecha estaría On. Cuando el usuario activa el interruptor, quiero que la parte del "control deslizante" se deslice hacia el otro lado e indique que está desactivado. Luego podría tener una devolución de llamada que toma como entrada el estado del interruptor de palanca para que pueda actuar en consecuencia.¿Cómo crear un interruptor de encendido/apagado con Javascript/CSS?

¿Alguna idea de cómo hacer esto?

Fuente

2009-12-24 esac

No sabe cómo esta pregunta es demasiado amplia después de casi 5 años de estar abierta. Esboza claramente lo que estoy buscando y obtuvo una respuesta el mismo día que responde perfectamente la pregunta. La pregunta todavía recibe mucha actividad y las nuevas respuestas que están vigentes se publican 4.5 años después de hacer la pregunta. – esac

Escribí [un tutorial] (http://blog.felixhagspiel.de/index.php/posts/custom-inputs) sobre cómo crear interruptores de encendido/apagado solo con CSS (también casillas de verificación y radios). [Aquí puede ver la demostración] (http://custom-inputs.felixhagspiel.de/) –

[No estoy seguro de su pregunta, pero probablemente esté buscando algo como esto.] (Http: //www.webdesignerwall. com/demo/jquery/simple-slide-panel.html) – Sarfraz

¿Te refieres a casillas de verificación de iPhone? Trate Thomas Reynolds' iOS Checkboxes script:

Una vez que los archivos están disponibles para su sitio, activando el guión es muy fácil:

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

Resultados:

Fuente

2009-12-24 09:07:36

este es realmente ingenioso –

hermoso. No tengo un iPhone, así que no sabía cómo se llamaba. – esac

http://proto.io/freebies/onoff/ - servicio para generar flipswitches de encendido/apagado de CSS3 puro con transiciones animadas. – realmag777

uso de JavaScript llanura

<html> 

    <head> 

    <!-- define on/off styles --> 
    <style type="text/css"> 
     .on { background:blue; } 
     .off { background:red; } 
    </style> 

    <!-- define the toggle function --> 
    <script language="javascript"> 
     function toggleState(item){ 
      if(item.className == "on") { 
       item.className="off"; 
      } else { 
       item.className="on"; 
      } 
     } 
    </script> 
    </head> 

    <body> 
    <!-- call 'toggleState' whenever clicked --> 
    <input type="button" id="btn" value="button" 
     class="off" onclick="toggleState(this)" /> 
    </body> 

</html>

Usando jQuery

Si utiliza jQuery, puede hacerlo utilizando la función toggle, o el uso de la función toggleClass dentro del manejador de eventos de clic, como este :

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

Uso de los efectos jQuery UI, puede animar las transiciones: http://jqueryui.com/demos/toggleClass/

Fuente

2009-12-24 09:03:31 Groo

Muchas gracias .... – anglimasS

Esquema: Crear dos elementos: un control deslizante/interruptor y un canal como padre de la corredera. Para alternar el estado, cambie el elemento deslizante entre una clase "encendida" y "apagada". En el estilo para una clase, configure "izquierda" en 0 y deje "a la derecha" la predeterminada; por la otra clase, hacer lo contrario:

<style type="text/css"> 
.toggleSwitch { 
    width: ...; 
    height: ...; 
    /* add other styling as appropriate to position element */ 
    position: relative; 
} 
.slider { 
    background-image: url(...); 
    position: absolute; 
    width: ...; 
    height: ...; 
} 
.slider.on { 
    right: 0; 
} 
.slider.off { 
    left: 0; 
} 
</style> 
<script type="text/javascript"> 
function replaceClass(elt, oldClass, newClass) { 
    var oldRE = RegExp('\\b'+oldClass+'\\b'); 
    elt.className = elt.className.replace(oldRE, newClass); 
} 
function toggle(elt, on, off) { 
    var onRE = RegExp('\\b'+on+'\\b'); 
    if (onRE.test(elt.className)) { 
     elt.className = elt.className.replace(onRE, off); 
    } else { 
     replaceClass(elt, off, on); 
    } 
} 
</script> 
... 
<div class="toggleSwitch" onclick="toggle(this.firstChild, 'on', 'off');"><div class="slider off" /></div>

Por otra parte, acaba de establecer la imagen de fondo para el "encendido" y "apagado" estados, lo cual es un enfoque mucho más fácil que curioseaba con el posicionamiento.

Fuente

2009-12-24 09:04:30 outis

Echa un vistazo a este generador: On/Off FlipSwitch

puede obtener diferentes resultados de estilo y su CSS solamente - no javascript!

Fuente

2012-10-16 06:35:05

nice one ....... –

Esto es muy bueno. – HPWD

Darn proto.io página no funciona. –

Estaba buscando lo mismo. Si usa Bootstrap, un excelente (no oficial) Bootstrap Switch is available.

Fuente

2013-03-01 15:11:28 smonff

El enlace redirige a http://bootstrap-switch.org/ que no se carga. Use http://www.bootstrap-switch.org/ (con www; gracias a SO para ocultar visualmente www en mi enlace) que sí carga. –

Puede lograr esto usando HTML y CSS y convertir una casilla de verificación en un Interruptor de HTML.

HTML

 <div class="switch"> 
     <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox"> 
     <label for="cmn-toggle-1"></label> 
     </div>

CSS

input.cmn-toggle-round + label { 
    padding: 2px; 
    width: 100px; 
    height: 30px; 
    background-color: #dddddd; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
} 
input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after { 
    display: block; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    bottom: 1px; 
    content: ""; 
} 
input.cmn-toggle-round + label:before { 
    right: 1px; 
    background-color: #f1f1f1; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    -ms-border-radius: 30px; 
    -o-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-transition: background 0.4s; 
    -moz-transition: background 0.4s; 
    -o-transition: background 0.4s; 
    transition: background 0.4s; 
} 
input.cmn-toggle-round + label:after { 
    width: 40px; 
    background-color: #fff; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    -ms-border-radius: 100%; 
    -o-border-radius: 100%; 
    border-radius: 100%; 
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    -webkit-transition: margin 0.4s; 
    -moz-transition: margin 0.4s; 
    -o-transition: margin 0.4s; 
    transition: margin 0.4s; 
} 
input.cmn-toggle-round:checked + label:before { 
    background-color: #8ce196; 
} 
input.cmn-toggle-round:checked + label:after { 
    margin-left: 60px; 
} 

.cmn-toggle { 
    position: absolute; 
    margin-left: -9999px; 
    visibility: hidden; 
} 
.cmn-toggle + label { 
    display: block; 
    position: relative; 
    cursor: pointer; 
    outline: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

DEMO

Fuente

2016-01-02 04:03:47

Cada vez que tengo que hacer un cambio, uso este método. Solo una simple casilla de verificación con una etiqueta y CSS. – Magus

proto.Tengo un generador de interruptor de encendido/apagado realmente bueno que parece ser altamente personalizable. Podría usarlo para mi proyecto.

https://proto.io/freebies/onoff/

Fuente

2016-04-16 21:08:49

Puede echar un vistazo a la interfaz de usuario Escudo de Switch widget. Es tan fácil de usar como esto:

<input id="switch3" type="checkbox" value="" /> 

<script type="text/javascript"> 
    jQuery(function ($) { 
     $("#switch3").shieldSwitch({ 
     onText: "Yes, save it", 
     ffText: "No, delete it", 
     cls: "large" 
    }); 
</script>

Fuente

2016-10-25 07:16:50

¿Cómo crear un interruptor de encendido/apagado con Javascript/CSS?

Respuesta

Cuestiones relacionadas