Julio 2

2016
ON/OFF

Cómo hacer un botón ON/OFF con un checkbox

Cuando queremos configurar opciones SI/NO, ON/OFF, ACTIVADO/DEACTIVADO solemos utilizar u checkbox, pero muchas veces queda un poco evidente de lo que pretendemos. Con un poco de CSS y el uso de JQUERY podremos obtener un resultado muy atractivo.

Hoy un poco de diseño con CSS

¿Que te parecería tener en tu WEB un botón de ON/OFF? Con este poco código que te propongo hoy podrás tenerlo.

ON/OFF

Es mucho mas fácil de lo que parece

No se necesita imágenes de fondo, ni nada. Todo es códico CSS para dar el diseño al botón.

/*--/switch--*/
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid # 777;
border-radius: 20px;
-o-border-radius: 20px;
--webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: # 00C6D7; color: # FFFFFF;
font-weight: 400;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: # 002561;
color: # fff;
text-align: right;
font-weight: 400;
}
.onoffswitch-switch {
display: block;
width: 34px;
margin: 0.5px;
background: # FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid # 777;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

Si analizas un poco el CSS podrás comprobar que no siempre tiene que ser ON/OFF puedes escribir lo que se te ocurra en la etiqueta "content".

Ahora el HTML

Con este poco código HTML se dibuja el botón.

  < div class="onoffswitch" >
< input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
onchange="asignaCheckbox('myonoffswitch', '< %= CheckBox1.ClientID % >')" />
< label class="onoffswitch-label" for="myonoffswitch" >
< span class="onoffswitch-inner" >< /span >
< span class="onoffswitch-switch" >< /span >
< /label >
< /div >

Como puedes observar en el evento "onchange" se hace la llamada a un JQUERY. Es éste el que va a hacer el cambio de valor en nuestro checkbox de ASP, ya que yo no he conseguido que funcione directamente con el CSS. El que lo consiga que lo comente y así todos mejoramos.

El JQUERY

Te recuerdo que para ejecutar el JQUERY necesitas cargar la librería básica de JQUERY.

/* asignar el valor de un checkbox a otro (sender) al elemen d (destination)  */
function asignaCheckbox(s, d) {
try {
var marcado = $(document.getElementById(s)).prop("checked");
if ($(document.getElementById(s)).prop("checked")) {
$(document.getElementById(d)).prop("checked", true); // para poner la marca
}
else {
$(document.getElementById(d)).prop("checked", false); // para poner la marca
}
} catch (e) {
alert(e.message);
}
}

Como hacer para recoger el valor al cargar la página

Cuando cargamos la página y asignamos el valor a nuestro checkbox debemos hacer que el el checkbox HTML cambie de valor también, para ello ejecutaremos la función de asignaCheckbox lo primera tras la carga de la página.

    < script type="text/javascript" >
$(document).ready(function () {
asignaCheckbox('< %= CheckBox1.ClientID % >', 'myonoffswitch');
});
< /script >

Si tenemos muchos checkbox repetiremos esta línea por cada uno de ellos. O si prefieres puedes ejecutar un bucle de la forma que prefieras.

Consideraciones

La única "pega" que tiene esta forma de hacer las cosas es que tenemos que ocultar los checkbox asp y no puede ser con la propiedad visible=false ya que esto hacer que no se carguen y el JQUERY no los encuentra. Para ello solo he encontrado englobar dentro de un DIV y en el estilo ponerle la propiedad display:none

< div style="display:none" >< /div >

Conclusiones

Espero que les haya sido de utilidad, cualquier duda o mejora ya saben... A COMENTAR!!!


#css #CSHARP #jquery #AJAX #ASP #HTML


0 Comentarios

Escribir un comentario

6 x 5 =

ON/OFF


Archivo