Mantener un boton pulsado y que se comporte como un checkbox

nucleorion · #1 (**permalink**) 31/08/2011, 05:27

Hola.

Quería saber si hay algún modo de hacer que un input button de un formulario se mantenga pulsado para usarlo condicionalmente como si fuese un checkbox.

Pongo un ejemplo:
Tengo una calculadora a la que le estoy poniendo un textarea en el que salen las operaciones realizadas. Como aquellas en las que se imprimía un ticket. Entonces con un checkbox elijo si se muestra:

Código:

10+15+24=49

o

Código:

 10
 15
+24
------
 49

Pero el checkbox queda muy feo en la calculadora, me gustaría sustituirlo por un botón que cuando se pulsa una vez se queda pulsado y cuando se pulsa otra vuelve a su posición inicial. Todo esto para detectar después, a la hora de ejecutar la función que escribe en el textarea, si el botón esta pulsado o no.

quimfv · #2 (**permalink**) 31/08/2011, 05:50

CSS es tu solucion creo que se puede llegar a mostrar un checkbox como si fuera un botton...

Busca por "checkbox looks like button" http://forums.adobe.com/thread/480943

Otra solucion elegante serian dos radibuttons....

nucleorion · #3 (**permalink**) 31/08/2011, 07:43

Que es eso de <mx:Form>

Son librerias externas para descargar?

No entiendo bien lo que dicen en esa web, he buscado tambien en ingles "checkbox looks like button with css" pero todo lo que me sale es poner imagenes en sustitucion de los controles ordinarios del formulario.

nucleorion · #4 (**permalink**) 31/08/2011, 08:03

Buscando por toggle button he encontrado este ejemplo:

Código:

<head>
<style type="text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onClick="togglestyle(this)" />
</body>
</html>

Tiene buena pinta, parece que ahora solo tengo que darle el estilo de un boton normal mientras se pulsa y en su estado normal.

Despues para saber si esta pulsado o no deberia bastar con consultar su classname, genial :)

Ya os contare

nucleorion · #5 (**permalink**) 01/09/2011, 04:01

Creo que es una buena solucion, me ha funcionado a la perfeccion.

Os dejo aqui el cambio en el css para obtener la apariencia de un boton normal.

Código:

/* Como cada navegador dibuja el boton por defecto de una 
manera diferente les podemos dar a todos los botones estas 
reglas de estilo para que sean iguales que el boton que se
mantiene pulsado y hace las veces de un checkbox, conocido 
tambien como un boton toggle*/
.button{
	background: #dadada;
	font-size: 10pt; 

	border-radius: 5px;
/*	padding-left: 3px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 3px;*/
}

/* Aqui los estilos para el boton toggle on y off */
.off{
	background: #dadada;
	font-size: 10pt; 
	/*border:2px outset #c6c6c6;*/	
	border-bottom:2px solid #606060;
	border-right:2px solid #606060 ;
	border-top:2px solid #eee ;
	border-left:2px solid #eee ;
	border-radius: 5px;
	
/*	padding-left: 2px;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 3px;*/
}
.on{
	background: #cdcdcd;
	font-size: 10pt; 

	/*width: 45px; 
	height: 25px; 
	border:2px inset #c6c6c6;*/
	border-bottom:2px solid #eee;
	border-right:2px solid #eee;
	border-top:2px solid #606060;
	border-left:2px solid #606060;
	border-radius: 5px;

/*	padding-left: 3px;
	padding-top: 3px;
	padding-right: 2px;
	padding-bottom: 2px;*/
}

Debido a la diferencia entre navegadores no he podido aplicar las reglas padding que hacen que el texto parezca hundido. Por lo demas funciona a la perfeccion.

Recordad que despues para saber en javascript si esta pulsado o no basta con consultar la propiedad className.

Código:

if (document.getElementById('btn').className == "on"){

IsaBelM · #6 (**permalink**) 01/09/2011, 04:45

por casualidades de la vida, puede que este tema te interese