Después de un largo tiempo sin escribir por motivos de trabajo, vuelvo al blog. Hoy voy a anotar un truco con jQuery que puede ahorrarnos mucho código: la función toogle.
La función toogle actúa como un interruptor, de manera que acepta dos parámetros, que serán dos funciones, una para cuando actives el interruptor y otra para cuando lo desactives.
Vamos a ver un ejemplo en el cual añadiremos una clase css a un div pulsando en un botón, de manera que cuando pinchemos en el botón , el div pasará a tener un color de fondo rojo y cuando volvamos a pulsar, el color de fondo desaparecerá.
Vamos a ver el ejemplo:
Primero creamos la clase css:
-
-
.rojo{
-
background:red;
-
width:200px;
-
height:300px;
-
}
-
Después introducimos el siguiente código javascript en en el head de nuestro documento html:
-
-
<script type="text/javascript">
-
-
$(document).ready(function() {
-
$(‘#conmutador’).toggle(function() {
-
$(‘#contenedor’).addClass(‘rojo’);
-
}, function() {
-
$(‘#contenedor’).removeClass(‘rojo’);
-
});
-
});
-
</script>
-
Usamos los selectores de jQuery para obtener el objeto con id conmutador y le aplicacamos la función toogle.
Y este es el código html que va dentro del body:
-
-
<h1>Pruebas de jQuery</h1>
-
-
<button id="conmutador">Conmutador</button>
-
<div id="contenedor"></div>
-
Ya tenemos nuestro interruptor en javascript con unas pocas líneas de código.
11 de Abril del 2008 a las 10:31 am
Muy buena la nota se agradece el aporte
saludos