elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Panel Vertical/Horizontal desplegable con jQuery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Panel Vertical/Horizontal desplegable con jQuery  (Leído 6,640 veces)
Shell Root
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.723


<3


Ver Perfil WWW
Panel Vertical/Horizontal desplegable con jQuery
« en: 20 Febrero 2012, 23:07 pm »

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
  1. <!DOCTYPE html>
  2. <html id="home" lang="en">
  3.    <head>
  4.        <meta charset=utf-8 />
  5.        <link rel="stylesheet" href="css/style.css" />
  6.        <script src="js/jQuery.js"></script>
  7.        <script src="js/toggler.js"></script>
  8.        <title>PoC</title>
  9.    </head>
  10.    <body>
  11.        <section id="wrapper">
  12.            <header>
  13.                #header
  14.            </header>
  15.  
  16.            <section id="slideLeft">
  17.                <div id="content">
  18.                    #slideLeft
  19.                </div>
  20.            </section>
  21.  
  22.            <section id="contenido">
  23.                <h1>#contenido</h1>
  24.                <div id="togglerSlideLeft"></div>
  25.                <div id="render">
  26.                    #contenido
  27.                </div>
  28.            </section>
  29.  
  30.            <section id="slideBottom">
  31.                <div id="togglerSlideBottom"></div>
  32.                <div id="content">
  33.                    #slideBottom
  34.                </div>
  35.            </section>
  36.  
  37.            <footer>
  38.                <span>
  39.                    #footer
  40.                </span>
  41.            </footer>
  42.        </section>
  43.    </body>
  44. </html>

APLICANDO ESTILOS
css/style.css
Código
  1. *{ padding:0; margin:0; }
  2. html,body{ height:100%; overflow:hidden; }
  3. body{ font-family:Helvetica, Arial, sans-serif; font-size:12px !Important; }
  4.  
  5. header{ height:40px; padding:10px; border-bottom:1px solid #c9d7f1; }
  6.  
  7. #slideLeft{ width:260px; height:100%; float:left; }
  8. #slideLeft #content{ padding:10px; }
  9.  
  10. #contenido{ height:100%; margin-left:260px; }
  11. #contenido h1{ height:40px; padding:0 10px; background:#c2cff1; font-size:18px; font-weight:bold; }
  12. #contenido #togglerSlideLeft{ width:16px; border-left:1px solid #c2cff1; background:#EBEFF9 url("../img/togglerLeft.gif") no-repeat left center; float:left; }
  13. #contenido #togglerSlideLeft:hover{ background: #c2cff1 url("../img/togglerLeft.gif") no-repeat -25px center; cursor:pointer; }
  14. #contenido #togglerSlideLeft.off{ background: #EBEFF9 url("../img/togglerRight.gif") no-repeat left center; margin-left:0; }
  15. #contenido #togglerSlideLeft.off:hover{ background: #c2cff1 url("../img/togglerRight.gif") no-repeat -25px center; margin-left:0; }
  16.  
  17. #slideBottom{ width:100%; }
  18. #slideBottom #togglerSlideBottom{ width:100%; height:16px; border-top:1px solid #8c9dc8; background:#EBEFF9 url("../img/togglerDown.gif") no-repeat top center; }
  19. #slideBottom #togglerSlideBottom:hover{ background: #c2cff1 url("../img/togglerDown.gif") no-repeat center -25px; cursor:pointer; }
  20. #slideBottom #togglerSlideBottom.offBottom{ background: #EBEFF9 url("../img/togglerUp.gif") no-repeat top center; margin-left:0; }
  21. #slideBottom #togglerSlideBottom.offBottom:hover{ background: #c2cff1 url("../img/togglerUp.gif") no-repeat center -25px; margin-left:0; }
  22. #slideBottom #content{ padding:10px; }
  23.  
  24. footer{ width:100%; height:30px; text-align:right; line-height:30px; border-top:1px solid #8c9dc8; background:#C2CFF1; position:fixed; bottom:0; }
  25. footer span{ padding-right:10px; }

AÑADIENDO INTERACCIÓN CON JQUERY
js/toggler.js
Código
  1. // Iniciar cuando se termine de cargar la pagina.
  2. $(document).ready(function(){
  3.  
  4.    // Variables para saber el estado de los slide's
  5.    var estadoSlideLeft = true;
  6.    var estadoSlideBottom = true;
  7.  
  8.    // Variables con los elementos de la pagina.
  9.    var contenido = $("#contenido");
  10.    var slideLeft = $("#slideLeft");
  11.    var slideBottom = $("#slideBottom");
  12.    var togglerSlideLeft = $("#togglerSlideLeft");
  13.    var togglerSlideBottom = $("#togglerSlideBottom");
  14.    var render = $("#render");
  15.  
  16.    // Variables con la medida reservada del slideBottom
  17.    var slideBottomHeight = 150;
  18.    var slideBottomWidth = 0;
  19.  
  20.    // Variables para las medidas
  21.    var windowHeight;
  22.    var togglerHeight;
  23.    var renderHeight;
  24.  
  25.    // Calcular y aplicar medidas actuales al iniciar.
  26.    calcularMedidas();
  27.    aplicarMedidas();
  28.  
  29.    // Calcular y aplicar medidas actuales al cambiar el tamaño.
  30.    $(window).resize(function(){
  31.        calcularMedidas();
  32.        aplicarMedidas();
  33.    });
  34.  
  35.    // Agregar evento click del toggler la función.
  36.    togglerSlideLeft.click( displaySlideLeft );
  37.    togglerSlideBottom.click( displaySlideBottom );
  38.  
  39.    // Función para calculas las medidas
  40.    function calcularMedidas(){
  41.        windowHeight = document.documentElement.clientHeight;
  42.  
  43.        togglerHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
  44.        renderHeight = (windowHeight - 51 - 40 - 31 - slideBottomHeight);
  45.        slideBottomHeight = (slideBottomHeight - 21);
  46.    }
  47.  
  48.    // Función para aplicar las medidas
  49.    function aplicarMedidas(){
  50.        slideBottom.css( "height", slideBottomHeight + 'px' );
  51.        render.css( "height", renderHeight + "px" );
  52.        togglerSlideLeft.css( "height", togglerHeight  +"px" );
  53.    }
  54.  
  55.    // Función para mostrar/ocultar el slideLeft
  56.    function displaySlideLeft(){
  57.        if( estadoSlideLeft ){
  58.            slideLeft.hide();
  59.            contenido.css("margin-left", "0");
  60.            togglerSlideLeft.addClass("off");
  61.            estadoSlideLeft = false;
  62.        }else{
  63.            slideLeft.show();
  64.            contenido.css( "margin-left", slideLeft.width()+'px' );
  65.            togglerSlideLeft.removeClass("off");
  66.            estadoSlideLeft = true;
  67.        }
  68.    }
  69.  
  70.    // Función para mostrar/ocultar el slideBottom
  71.    function displaySlideBottom(){
  72.        if( estadoSlideBottom ){
  73.            slideBottomWidth = contenido.height() + parseInt(slideBottomHeight) - 6;
  74.            slideLeft.css("height", slideBottomWidth + 'px' );
  75.            togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
  76.            contenido.css("height", slideBottomWidth + 'px' );
  77.            render.css( "height", slideBottomWidth + "px" );
  78.            togglerSlideBottom.addClass("offBottom");
  79.            estadoSlideBottom = false;
  80.        }else{
  81.            slideBottomWidth = contenido.height() - parseInt(slideBottomHeight) + 6;
  82.            slideLeft.css("height", slideBottomWidth + 'px' );
  83.            togglerSlideLeft.css("height", (slideBottomWidth - 40) + 'px' );
  84.            contenido.css("height", slideBottomWidth + 'px' );
  85.            togglerSlideBottom.removeClass("offBottom");
  86.            estadoSlideBottom = true;
  87.        }
  88.    }
  89.  
  90. });


Sugerencias, aportes, fallas, comentarios, cualquier cosa es bienvenida.


« Última modificación: 20 Febrero 2012, 23:19 pm por Shell Root » En línea

Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Panel Vertical/Horizontal desplegable con jQuery
« Respuesta #1 en: 20 Febrero 2012, 23:12 pm »

Que trabajo... gracias por compartirlo!
Podrias armar un .rar con las imagenes?  ;D

EDITO: Creaste otro thread.


En línea

Shell Root
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.723


<3


Ver Perfil WWW
Re: Panel Vertical/Horizontal desplegable con jQuery
« Respuesta #2 en: 20 Febrero 2012, 23:18 pm »

Agregado el zip con todos los archivos y el demo.
En línea

Por eso no duermo, por si tras mi ventana hay un cuervo. Cuelgo de hilos sueltos sabiendo que hay veneno en el aire.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Al cargar la pagina, se muevan los scroll vertical y horizontal aleatoriamente « 1 2 3 4 »
Desarrollo Web
javierr 36 20,208 Último mensaje 7 Diciembre 2010, 15:56 pm
por seele
Panel deslizable horizontal y vertical.
Desarrollo Web
Shell Root 0 3,628 Último mensaje 20 Julio 2011, 08:19 am
por Shell Root
Horientacion Vertical y horizontal
Programación C/C++
SKaY9 0 1,655 Último mensaje 24 Febrero 2013, 14:24 pm
por SKaY9
Problema centrar menu vertical desplegable
Desarrollo Web
Kaxperday 9 2,965 Último mensaje 28 Febrero 2014, 21:23 pm
por Kaxperday
Vertical vs Horizontal
Hardware
B€T€B€ 9 3,490 Último mensaje 28 Marzo 2020, 00:28 am
por B€T€B€
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines