codeando.net

Hola de nuevo, esta vez hemos estado más tiempo del que habríamos querido sin actualizar, pero aquí estamos de nuevo. Hoy vamos a explicar cómo hemos implementado el nuevo formulario de login (y de registro) que podéis ver si pulsais sobre el enlace que deberíais ver en la parte derecha de la cabecera y que está basado en el que podéis encontrar en este estupendo post de NETTUTS.

Bueno, para empezar crearemos la estructura HTML:

<div id="wrapper">
    <div id="panel">
        <div id="panel_contents">
        </div>
    </div>
    <div id="show_button"><a href="#">Login</a></div>
    <div id="hide_button"><a href="#">Esconder</a></div>
</div>

Como podéis ver, el código HTML es totalmente limpio, ni siquiera los enlaces llaman a funciones javascript (esto lo arreglamos luego gracias a las virtudes de jQuery). El contenido del panel irá, como ya habreis supuesto, en #panel_contents; en codeando.net hemos decidido incluir dos formularios, el de login y el de registro, pero cada uno puede colocar lo que desee.

El siguiente paso, será definir los estilos básicos (visibilidad, tamaño y posicionamiento):

#wrapper{
	text-align: center;
}
 
#toppanel {
	position: absolute;
	top: 134px;
	width: 612px;
	z-index: 25;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
 
#panel {
	width: 612px;
	position: relative;
	top: 1px;
	height: 400px;
	margin-left: auto;
	margin-right: auto;
	height: 0px;
	z-index: 10;
	overflow: hidden;
	text-align: left;
}
 
#panel_contents {
	height: 100%;
	width: 616px;
	position: absolute;
	z-index: -1;
}
 
#show_button {
	position: relative;
	top: -30px;
	left: 460px;
}
 
#hide_button {
	position: relative;
	font-size: 90%;
	font-weight: bold;
	z-index: 26;
	margin-top: -36px;
}

Por supuesto, el aspecto y el posicionamiento final dependerá de vuestras necesidades de diseño; este ejemplo está basado en la implementación que hemos hecho en codeando.net.

Y por último el código javascript que hará que funcione nuestro panel desplegable:

<script type="text/javascript"><!--
	$(document).ready(function() {
		$("div#show_button").click(function(){
			$("div#show_button").toggle();
			$("div#panel").animate({
				height: "460px"
			}, "fast", "swing", function() {$("div#hide_button").toggle();});
 
		});
 
		$("div#hide_button").click(function(){
			$("div#hide_button").toggle();
			$("div#panel").animate({
				height: "0px"
			}, "fast", "swing", function(){$("div#show_button").toggle();});
 
		});
 
	});
--></script>

Y con esto ya deberíamos tener nuestro panel funcionando, todo comentario será bien recibido. En otra entrega veremos cómo implementar un sistema de registro de usuarios con activación por email.