Panel Vertical/Horizontal desplegable con jQuery

Iniciado por Shell Root, 20 Febrero 2012, 23:07 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Shell Root

20 Febrero 2012, 23:07 PM Ultima modificación: 20 Febrero 2012, 23:19 PM por Shell Root
Panel Vertical/Horizontal desplegable con jQuery

DEMO: http://shellroot.vacau.com/
DOWNLOAD: http://www.mediafire.com/?jzrvuely99o139v
Más información: Panel Vertical/Horizontal desplegable con jQuery


 
   
Por cosas raras de la vida, necesitaba construir dos panales: uno horizontal y otro vertical, para la construcción de una aplicación, me costo un poco de trabajo y tiempo, así que lo compartiré con ustedes.

Aprenderemos a crear nuestro propio panel lateral desplegable basado en jQuery. Lo haremos partiendo de cero y explicándolo como siempre paso a paso, de forma que todos podamos comprender cómo funciona. Todo ello inspirándonos en el panel lateral de Google Reader.

ESTRUCTURA HTML
html5
Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html id="home" lang="en">
   <head>
       <meta charset=utf-8 />
       <link rel="stylesheet" href="css/style.css" />
       <script src="js/jQuery.js"></script>
       <script src="js/toggler.js"></script>
       <title>PoC</title>
   </head>
   <body>
       <section id="wrapper">
           <header>
               #header
           </header>
           
           <section id="slideLeft">
               <div id="content">
                   #slideLeft
               </div>
           </section>
           
           <section id="contenido">
               <h1>#contenido</h1>
               <div id="togglerSlideLeft"></div>
               <div id="render">
                   #contenido
               </div>
           </section>
           
           <section id="slideBottom">
               <div id="togglerSlideBottom"></div>
               <div id="content">
                   #slideBottom
               </div>
           </section>
           
           <footer>
               <span>
                   #footer
               </span>
           </footer>
       </section>
   </body>
</html>

APLICANDO ESTILOS
css/style.css
Código (css) [Seleccionar]
*{ padding:0; margin:0; }
html,body{ height:100%; overflow:hidden; }
body{ font-family:Helvetica, Arial, sans-serif; font-size:12px !Important; }

header{ height:40px; padding:10px; border-bottom:1px solid #c9d7f1; }

#slideLeft{ width:260px; height:100%; float:left; }
#slideLeft #content{ padding:10px; }

#contenido{ height:100%; margin-left:260px; }
#contenido h1{ height:40px; padding:0 10px; background:#c2cff1; font-size:18px; font-weight:bold; }
#contenido #togglerSlideLeft{ width:16px; border-left:1px solid #c2cff1; background:#EBEFF9 url("../img/togglerLeft.gif") no-repeat left center; float:left; }
#contenido #togglerSlideLeft:hover{ background: #c2cff1 url("../img/togglerLeft.gif") no-repeat -25px center; cursor:pointer; }
#contenido #togglerSlideLeft.off{ background: #EBEFF9 url("../img/togglerRight.gif") no-repeat left center; margin-left:0; }
#contenido #togglerSlideLeft.off:hover{ background: #c2cff1 url("../img/togglerRight.gif") no-repeat -25px center; margin-left:0; }

#slideBottom{ width:100%; }
#slideBottom #togglerSlideBottom{ width:100%; height:16px; border-top:1px solid #8c9dc8; background:#EBEFF9 url("../img/togglerDown.gif") no-repeat top center; }
#slideBottom #togglerSlideBottom:hover{ background: #c2cff1 url("../img/togglerDown.gif") no-repeat center -25px; cursor:pointer; }
#slideBottom #togglerSlideBottom.offBottom{ background: #EBEFF9 url("../img/togglerUp.gif") no-repeat top center; margin-left:0; }
#slideBottom #togglerSlideBottom.offBottom:hover{ background: #c2cff1 url("../img/togglerUp.gif") no-repeat center -25px; margin-left:0; }
#slideBottom #content{ padding:10px; }

footer{ width:100%; height:30px; text-align:right; line-height:30px; border-top:1px solid #8c9dc8; background:#C2CFF1; position:fixed; bottom:0; }
footer span{ padding-right:10px; }

AÑADIENDO INTERACCIÓN CON JQUERY
js/toggler.js
Código (javascript) [Seleccionar]
// Iniciar cuando se termine de cargar la pagina.
$(document).ready(function(){
   
   // Variables para saber el estado de los slide's
   var estadoSlideLeft = true;
   var estadoSlideBottom = true;
   
   // Variables con los elementos de la pagina.
   var contenido = $("#contenido");
   var slideLeft = $("#slideLeft");
   var slideBottom = $("#slideBottom");
   var togglerSlideLeft = $("#togglerSlideLeft");
   var togglerSlideBottom = $("#togglerSlideBottom");
   var render = $("#render");
   
   // Variables con la medida reservada del slideBottom
   var slideBottomHeight = 150;
   var slideBottomWidth = 0;

   // Variables para las medidas
   var windowHeight;
   var togglerHeight;
   var renderHeight;

   // Calcular y aplicar medidas actuales al iniciar.
   calcularMedidas();
   aplicarMedidas();
   
   // Calcular y aplicar medidas actuales al cambiar el tamaño.
   $(window).resize(function(){
       calcularMedidas();
       aplicarMedidas();
   });
   
   // Agregar evento click del toggler la función.
   togglerSlideLeft.click( displaySlideLeft );
   togglerSlideBottom.click( displaySlideBottom );
   
   // Función para calculas las medidas
   function calcularMedidas(){
       windowHeight = document.documentElement.clientHeight;
       
       togglerHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
       renderHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
       slideBottomHeight = (slideBottomHeight - 21);
   }

   // Función para aplicar las medidas
   function aplicarMedidas(){
       slideBottom.css( "height", slideBottomHeight + 'px' );
       render.css( "height", renderHeight + "px" );
       togglerSlideLeft.css( "height", togglerHeight  +"px" );
   }
   
   // Función para mostrar/ocultar el slideLeft
   function displaySlideLeft(){
       if( estadoSlideLeft ){
           slideLeft.hide();
           contenido.css("margin-left", "0");
           togglerSlideLeft.addClass("off");
           estadoSlideLeft = false;
       }else{
           slideLeft.show();
           contenido.css( "margin-left", slideLeft.width()+'px' );
           togglerSlideLeft.removeClass("off");
           estadoSlideLeft = true;
       }
   }
   
   // Función para mostrar/ocultar el slideBottom
   function displaySlideBottom(){
       if( estadoSlideBottom ){
           slideBottomWidth = contenido.height() + parseInt(slideBottomHeight) - 6;
           slideLeft.css("height", slideBottomWidth + 'px' );
           togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
           contenido.css("height", slideBottomWidth + 'px' );
           render.css( "height", slideBottomWidth + "px" );
           togglerSlideBottom.addClass("offBottom");
           estadoSlideBottom = false;
       }else{
           slideBottomWidth = contenido.height() - parseInt(slideBottomHeight) + 6;
           slideLeft.css("height", slideBottomWidth + 'px' );
           togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
           contenido.css("height", slideBottomWidth + 'px' );
           togglerSlideBottom.removeClass("offBottom");
           estadoSlideBottom = true;
       }
   }
   
});


Sugerencias, aportes, fallas, comentarios, cualquier cosa es bienvenida.
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.

EFEX

#1
20 Febrero 2012, 23:12 PM
Que trabajo... gracias por compartirlo!
Podrias armar un .rar con las imagenes?  ;D

EDITO: Creaste otro thread.
GITHUB 

Shell Root

#2
20 Febrero 2012, 23:18 PM
Agregado el zip con todos los archivos y el demo.
Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario