Slidedown jQuery
Tener elementos escondidos en nuestra página Web para evitar mostrar demasida información a los usuarios es muy habitual en las páginas Webs actuales.
Una de las muchas formas que existe de presentar links o botones que abren o habilitan un contenido es utilizar la función slidedown de jQuery.
En este artículo vamos a hacer mención de un ejemplo en el cual tenemos un botón de «Registrarse» y al hacer click aparezca el formulario de registro. Es decir, el formulario de registro lo mantendremos escondido hasta que el usuario decida hacer click en el botón o link de «Registrarse».
Lo primero que tendremos que hacer para disponer de este efecto es incluir los estilos y librerías necesarias, en este caso, jQuery en nuestro <head>.
En el <body> podríamos tener algo como lo siguiente:
<div>Registrarse</div>
<div id="formulario">
<form>
Email: <input type="text" /><br/>
Usuario: <input type="text" /><br/>
Contraseña: <input type="text" /><br/>
<input type="submit" value="Enviar" />
</form>
</div>
<script type="text/javascript">
$(".button").click(function () {
$(this).css({ borderStyle:"inset", cursor:"wait" });
$("#formulario").slideDown(1000,function(){
$(".button").css("visibility", "hidden");
});
});
</script>
La clave del asunto está entre las etiquetas «<script></script>» y lo que indican es que al hacer click en el elemento con class=»button» haremos slidedown de un formulario que hay escondido utilizando display: none mediante CSS:
#formulario { display:none; width:120px; float:left; margin:10px; }
Puedes ver más información en la siguiente url: slidedown jQuery o ver el ejemplo en funcionamiento.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Slidedown jQuery”
Deja una respuesta
41 artículos que te podrían interesar
Ver más sobre
I’d perpetually want to be update on new articles on this website , saved to favorites ! .