jueves, 17 de mayo de 2012

Evento toggle Jquery


Evento toggle

El evento toggle() se utiliza para generar comportamientos de cambio de estado generados al pinchar sobre un elemento. Por ejemplo, puede interesarnos que al pinchar sobre un elemento se visualice y que al volver a pinchar se oculte. Toggle nos permite hacer esto asociando dos o más funciones al mismo evento que se van ejecutando de forma secuencial.

Código de ejemplo ...

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script>
$(document).ready(function() {
$(':button#boton').toggle(function(){
$("#MostrarTexto").text("Primera vez");},
function() {
$("#MostrarTexto").text("Segunda vez");},
function() {
$("#MostrarTexto").text("Tercera vez");},
function() {
$("#MostrarTexto").text("Cuarta vez");
});
});
</script>
</head>
<body>
<input id="boton" type="button" value="Enviar">
<br>
<div id="MostrarTexto" style="color: green;">
</div>
</body>
</html>