Hola amigos, en esta ocasión vamos a realizar un interruptor utilizando HTML, CSS y JavaScript el resultado final serial este:
Para esto, comenzamos con nuestra plantilla en HTML, necesitamos una división principal, etiquetas al principio y final, una división central para hacer el fondo y dentro de esta una más para el botón al cual asignamos la función que vamos a utilizar al hacer click, en este caso Switch y la gregaremos más tarde a JavaScript, también agregaremos las clases y la id «s1» para el botón:
<div class="main">
<label>OFF</label>
<div class="switch-bg">
<div id="s1" class="switch switch-on" onclick="Switch()" spellcheck="true"></div>
</div>
<label>ON</label>
</div>
Vamos a la parte del CSS, aquí agregaremos las propiedades para los elementos del HTML, principalmente nos interesa el fondo del interruptor que esta con la clase «switch-bg» y el botón que va a tener dos estados y a la vez dos clases «switch» para apagado y «switch-on» para encendido, pueden cambiar los valores de las propiedades como les plazca, una propiedad importante es la transición (transition) que es la que hará el efecto del movimiento de un lado hacia el otro:
.main{width:250px; height:20px;}
div, label{
float:left;
color:#b7b7b7;
}
label{
margin: 0 5px 0 5px;
font-style:bold;
}
.switch-bg {
width: 60px;
background: #d6d6d6;
height: 10px;
float: left;
padding:2px;
border-radius: 30px;
border: 2pt solid #b7b7b7;
}
.switch {
margin: -10px 0 -5px 0px;
background: #51acb8;
position: absolute;
height: 25px;
width: 25px;
border-radius: 50px;
border: 2pt solid;
transition: .1s ease-in-out;
cursor: pointer;
}
.switch-on {
margin: -10px 0 -5px 30px;
background: #E74C3C;
}
Finalmente la última parte sería crear las función «Switch», instanciamos el elemento con id «s1» y dentro de la función hacemos las validaciones necesarias para cambiar las clases, en este caso se pide la confirmación para encender o apagar mediante un dialogo emergente, después de esto solo quedaría agregar su propio código.
e = document.getElementById('s1');
Switch = function ()
{
if (e.className =='switch switch-on')
{
var answer = confirm("Do you want to turn off?");
if (answer) e.className = 'switch';
}
else
{
var answer = confirm("Do you want to turn on?");
if (answer) e.className = 'switch switch-on';
}
}
Aquí les dejamos el código completo;
:
