Botón On/OFF

Cocotv · #1 (**permalink**) 07/02/2013, 07:03

Buenos días:

Estoy intentando hacer un botón on/off (estilo el de los teléfonos) un "Switch" que conmute dos estados sobre un DIV, el primero "Off"--> rgba(255,255,255,0.1) y el estado "On" background-> rgba(255,255,255,1). Vamos cambiar la opacidad de una div.

Es caso es que estoy utilizando esto, y no consigo hacer la acción de vuelta, ya sea un restore de la propiedad original o cambiarla, sólo consigo que funcione la primera vez que pulso.

<div > Modo Lectura </div><div class="onoffswitch">
<input name="onoffswitch" type="checkbox" class="onoffswitch-checkbox" id="myonoffswitch" onClick="MM_changeProp('bandablanca','','backgroun dColor','rgba(255,255,255,1)','DIV')" value="On">

<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>

El botón que estoy usando es el de esta web https://proto.io/freebies/onoff/
A ver si me podéis ayudar porque estoy muy perdido.

pd: Os dejo el Css

.onoffswitch-inner:before {
content: "ON";
padding-left: 2px;
background-color: #FFFFFF; color: #000000;
}

.onoffswitch-inner:after {
content: "OFF";
padding-right: 2px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}

.onoffswitch-switch {
width: 7px; margin: 4.5px;
background: #F8C400;
border: 2px solid #EEEEEE; border-radius: 5px;
position: absolute; top: 0; bottom: 0; right: 25px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; 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;
}

emprear · #2 (**permalink**) 07/02/2013, 07:57

Es más eficiente esto que el uso de las librerías de dreamweaver

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alternar propiedad de estilo con javascript</title>
<style type="text/css">
/*<![CDATA[*/
#miParrafo {color:red; }
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function cambia(capa){
var e = document.getElementById(capa);
e.style.color =(e.style.color=="green")? 'red':'green';
}
//]]>
</script>
</head>
<body>
<p id="miParrafo">QWERTYUIOP</p>
<p><button onclick="cambia('miParrafo')">alternar color</button></p>
</body>
</html>

podés cambiar otras propiedades, no solo el color

SAludos

Cocotv · #3 (**permalink**) 07/02/2013, 09:31

Muchas gracias!! he probado lo que dices y la verdad es que está muy bien, me parece más útil y sencillo que la librería de DW como bien dices. Lo acabo de adaptar al botón y funciona perfectamente.

Muchas gracias