Tutorial: FORM animado usando jQuery

Maiden Alan · 20 Jun 2011

Contiene 3 formas diversas para crear un form usando jQuery

Demostracion : Animated Form Switching with jQuery

En este tutorial vamos a crear un simple form animado con tres formas muy comunes. La idea no es salir de la página cuando el usuario pasa a otro form , sino que el nuevo form debe aparecer en la misma expansión o contracción de las dimensiones del nuevo form.

Nos aseguraremos de que el form sea tan eficaz cuando JavaScript no está habilitado, en cuyo caso nos limitaremos a saltar a la página de la otra forma.

Por lo tanto, vamos a empezar por la creación y el estilo de las tres formas.

Vamos a crear tres formas diferentes, una forma de inicio de sesión, un formulario de inscripción y un formulario de recordatorio de contraseña con un solo campo de entrada. Todos ellos tienen diferentes tamaños y número de entradas.

ESTRUCTURA

En primer lugar, vamos a crear un contenedor para las tres formas.

HTML:

<div id="form_wrapper" class="form_wrapper">
2
<!-- We will add our forms here -->
3
</div>

A continuación, vamos a agregar cada elemento de forma que el envoltorio e insertar los campos de entrada necesarios. Cada forma se va a tener un título y un cuadro de abajo con el botón de enviar. El formulario de inscripción, que será nuestro primer formulario, tendrá dos columnas que va a flotar junto a la otra:

HTML:

<form class="register">

    <h3>Register</h3>

    <div class="column">

        <div>

            <label>First Name:</label>

            <input type="text" />

        </div>

        <div>

            <label>Last Name:</label>

            <input type="text" />

        </div>

        <div>

            <label>Website:</label>

            <input type="text" value="http://"/>

        </div>

    </div>

    <div class="column">

        <div>

            <label>Username:</label>

            <input type="text"/>

        </div>

        <div>

            <label>Email:</label>

            <input type="text" />

        </div>

        <div>

            <label>Password:</label>

            <input type="password" />

        </div>

    </div>

    <div class="bottom">

        <div class="remember">

            <input type="checkbox" />

        </div>

        <input type="submit" value="Register" />

        <a href="index.html" rel="login" class="linkform">

            You have an account already? Log in here

        </a>

        <div class="clear"></div>

    </div>

</form>

Ahora vamos a añadir el formulario de acceso. Este form va a ser el que se muestra cuando el usuario visita el sitio. Es por eso que vamos a dar otra clase especial de "active":

HTML:

<form class="login active">

    <h3>Login</h3>

    <div>

        <label>Username:</label>

        <input type="text" />

    </div>

    <div>

        <label>Password:

            <a href="forgot_password.html" rel="forgot_password" class="forgot linkform">

                Forgot your password?

            </a>

        </label>

        <input type="password" />

    </div>

    <div class="bottom">

        <div class="remember"><input type="checkbox" />

            <span>Keep me logged in</span>

        </div>

        <input type="submit" value="Login"></input>

        <a href="register.html" rel="register" class="linkform">

            You don't have an account yet? Register here

        </a>

        <div class="clear"></div>

    </div>

</form>

Y, por último, vamos a añadir el formulario de recordatorio de contraseña:

HTML:

<form class="forgot_password">

    <h3>Forgot Password</h3>

    <div>

        <label>Username or Email:</label>

        <input type="text" />

    </div>

    <div class="bottom">

        <input type="submit" value="Send reminder"></input>

        <a href="index.html" rel="login" class="linkform">

            Suddenly remebered? Log in here

        </a>

        <a href="register.html" rel="register" class="linkform">

            You don't have an account? Register here

        </a>

        <div class="clear"></div>

    </div>

</form>

Los elementos de enlace que apuntan a otra form todos comparten el class "linkform" y para que podamos saber qué formulario debe mostrar cuando el usuario hace clic en el enlace, vamos a añadir la referencia a la "rel" atributo. Por ejemplo, el enlace "¿No tienes una cuenta? Regístrese aquí ", tendrá un valor del atributo rel de" registro ", ya que queremos mostrar el formulario de registro cuando haga clic en el enlace.

Como te habrás dado cuenta, el atributo "href" apuntará a la página estática HTML con el formulario respectivo. El enlace del ejemplo anterior se apuntan a la index.html que contiene el formulario de inicio de sesión. Este enlace entrado en uso, cuando JavaScript no está habilitado.

Ahora, vamos a condimentar estas formas usando algunas propiedades CSS3 limpio.

CSS

Vamos a empezar con la envoltura de la forma. Vamos a darle un color de fondo blanco, el cual será el color que vemos, cuando la forma es el cambio:

HTML:

.form_wrapper{
	background:#fff;
	border:1px solid #ddd;
	margin:0 auto;
	width:350px;
	font-size:16px;
	-moz-box-shadow:1px 1px 7px #ccc;
	-webkit-box-shadow:1px 1px 7px #ccc;
	box-shadow:1px 1px 7px #ccc;
}

El encabezamiento de cada formulario tendrá el siguiente formato:

HTML:

.form_wrapper h3{
	padding:20px 30px 20px 30px;
	background-color:#444;
	color:#fff;
	font-size:25px;
	border-bottom:1px solid #ddd;
}

Queremos que los formularios no se mostrará al principio, pero vamos a agregar una clase que nos dice que el formulario está activo y debe ser visible:

HTML:

.form_wrapper form{
	display:none;
	background:#fff;
}
form.active{
	display:block;
}

Vamos a definir ahora el ancho de cada formulario. En nuestra función de JavaScript que animará la envoltura de la forma a la dimensión correspondiente:

HTML:

form.login{
	width:350px;
}
form.register{
	width:550px;
}
form.forgot_password{
	width:300px;
}

Las columnas de la ficha de registro estarán flotando junto a la otra:

HTML:

.form_wrapper .column{
	width:47%;
	float:left;
}

Los enlaces en todas nuestros forms tendrá el siguiente formato:

HTML:

.form_wrapper a{
	text-decoration:none;
	color:#777;
	font-size:12px;
}
.form_wrapper a:hover{
	color:#000;
}

Elementos de las etiquetas tienen un estilo en línea por defecto. Queremos que nuestros etiquetas para los elementos de bloque:

HTML:

.form_wrapper label{
	display:block;
	padding:10px 30px 0px 30px;
	margin:10px 0px 0px 0px;
}

Vamos a estilo de las entradas con algunas buenas propiedades de CSS3, dándoles un degradado como fondo y alguna caja de sombra clara:

HTML:

.form_wrapper input[type="text"],
.form_wrapper input[type="password"]{
	border: solid 1px #E5E5E5;
	margin: 5px 30px 0px 30px;
	padding: 9px;
	display:block;
	font-size:16px;
	width:76%;
	background: #FFFFFF;
	background:
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background:
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
}
.form_wrapper input[type="text"]:focus,
.form_wrapper input[type="password"]:focus{
	background:#feffef;
}

La parte inferior de cada formulario será similar al del fondo título:

HTML:

.form_wrapper .bottom{
	background-color:#444;
	border-top:1px solid #ddd;
	margin-top:20px;
	clear:both;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}

Los elementos de enlace tendrá el siguiente formato:

HTML:

.form_wrapper .bottom a{
	display:block;
	clear:both;
	padding:10px 30px;
	text-align:right;
	color:#ffa800;
	text-shadow:1px 1px 1px #000;
}
.form_wrapper a.forgot{
	float:right;
	font-style:italic;
	line-height:24px;
	color:#ffa800;
	text-shadow:1px 1px 1px #fff;
}
.form_wrapper a.forgot:hover{
	color:#000;
}

Vamos a hacer que el contenedor para el recuerdo me flotan casilla de verificación:

HTML:

.form_wrapper div.remember{
	float:left;
	width:140px;
	margin:20px 0px 20px 30px;
	font-size:11px;
}
.form_wrapper div.remember input{
	float:left;
	margin:2px 5px 0px 0px;
}

El botón de envío tendrá una sombra inserción muy sutil, nada especial:

HTML:

.form_wrapper input[type="submit"] {
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	padding: 8px 0 9px;
	text-align: center;
	width: 150px;
	cursor:pointer;
	float:right;
	margin:15px 20px 10px 10px;
	text-shadow: 0 1px 0px #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
}
.form_wrapper input[type="submit"]:hover {
	background: #d9d9d9;
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #222;
}

Y eso es todo el estilo! Vamos a añadir un poco de Rock'n Roll con jQuery!

Javascript

La idea es animar al tamaño de la nueva forma y para pasar a ella, es decir, lo demuestran. Por lo tanto, primero en caché algunos elementos:

HTML:

//the form wrapper (includes all forms)
var $form_wrapper	= $('#form_wrapper'),

//the current form is the one with class "active"
$currentForm	= $form_wrapper.children('form.active'),

//the switch form links
$linkform		= $form_wrapper.find('.linkform');

We’ll get the width and height of each form to store it for later when we want to animate to it:

HTML:

$form_wrapper.children('form').each(function(i){
	var $theForm	= $(this);
	//solve the inline display none problem when using fadeIn/fadeOut
	if(!$theForm.hasClass('active'))
		$theForm.hide();
	$theForm.data({
		width	: $theForm.width(),
		height	: $theForm.height()
	});
});

Now, we will call the function that sets the dimension of the wrapper to the one of the current form:

HTML:

setWrapperWidth();

Cuando haga clic en un "link switch", que quiere ocultar la forma actual, ya que sabemos que vamos a cambiar a otro. Vamos a animar el ancho de la envoltura de la forma y la altura a la anchura y la altura de la nueva forma. Después de la animación se hace, se muestra la nueva forma:

HTML:

$linkform.bind('click',function(e){
	var $link	= $(this);
	var target	= $link.attr('rel');
	$currentForm.fadeOut(400,function(){
		//remove class "active" from current form
		$currentForm.removeClass('active');
		//new current form
		$currentForm= $form_wrapper.children('form.'+target);
		//animate the wrapper
		$form_wrapper.stop()
					 .animate({
						width	: $currentForm.data('width') + 'px',
						height	: $currentForm.data('height') + 'px'
					 },500,function(){
						//new form gets class "active"
						$currentForm.addClass('active');
						//show the new form
						$currentForm.fadeIn(400);
					 });
	});
	e.preventDefault();
});

La función que establece el ancho de la envoltura, simplemente establece sus propiedades CSS. Queremos asegurarnos de que el contenedor tiene el ancho adecuado y establecer la altura cuando se carga la página.

HTML:

function setWrapperWidth(){
	$form_wrapper.css({
		width	: $currentForm.data('width') + 'px',
		height	: $currentForm.data('height') + 'px'
	});
}

Para la demostración de que las personas con discapacidad botones de envío. Si los usa, usted tendrá que comprobar que la forma se presenta y dar la clase "activa" a la forma que desea cambiar, es decir, mostrar:

Insertar CODE, HTML o PHP:

$form_wrapper.find('input[type="submit"]')
			 .click(function(e){
				e.preventDefault();
			 });

Y eso es todo! Realmente esperamos que hayan disfrutado el tutorial y lo encuentre útil!

Ver Tutorial Original : Animated Form Switching with jQuery | Codrops

toledano · 20 Jun 2011

Por favor sigue las reglas, no hay tutorial en este post, solo enlaces. Se aplica la infracción correspondiente.

Maiden Alan · 20 Jun 2011

ya acepte las reglas , me falta informarme un poco mas gracias por hacerme dar en cuenta

Luis · 20 Jun 2011

Bueno, Van 7 post donde enlazas la demo y el tutorial, creo que deberías colocarlo aquí o será tomado como SPAM.

Saludos!

Tutorial: FORM animado usando jQuery

Maiden Alan

toledano

Maiden Alan

Luis

Temas similares