2009-11-23

jQuery: Truco para hacer expandible el contenido de tu sitio como en Youtube

YouTube posee la genial funcionalidad "cambiar vista" que permite cambiar entre modo "normal" y "wide" para así expandir o reducir el área del video.

Pero lo mejor de este efecto es que aunque el diseño cambia, se mantiene con un aspecto similar, y toda la información se mantiene fácilmente accesible. ¿Deseas implementarlo en tu sitio?

imageaxd1

Haz clic aquí para ver una demostración »

Puedes descargar los archivos haciendo clic aquí »

La imagen muestra lo que sucede cuando se cambia el punto de vista. Al cambiar a la visualización amplia, la sidebar desciende y el contenido se extiende totalmente. La creación de esto es muy simple. El truco está en la definición adecuada de la estructura y un poco de jQuery.

Estructura

Esta es la parte más importante. Para poder simular la estructura YouTube definiremos cinco secciones: cabecera, contenido, comentarios, sidebar y pie de página. La estructura que necesitamos es bastante simple:

PLAIN TEXT
  1. id="header">
  • id="main">
  • id="content">
  • id="sidebar">
  • id="comments">
  • id="footer">

    • La clave está en el CSS. Las áreas de contenido y comentario flotarán a la izquierda, mientras que la sidebar lo hará a la derecha. Esto permitirá que la sidebar baje cuando el contenido se estreche, para no perturbar el diseño. Ellos se colocarán dentro del contenedor "main" que limpiará todas las flotas. No habrá ningún estilamiento especial para la cabecera y el pie de página.

    PLAIN TEXT
    1. #header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
    2. #header { width:900px; margin:0px auto;}
    3. #main {width:960px; margin:0px auto; overflow:hidden;}
    4. #content { width:540px; float:left;}
    5. #comments { width:540px; float:left;}
    6. #sidebar { width:280px; margin-left:20px; float:right;}
    7. #footer { width:900px; margin:0px auto;}

    Inicialmente, el contenido tendrá 600px de ancho (incluyendo paddings). Cuando el usuario cambie a la vista amplia se estirará a 960px. Para lograr esto colocaremos un link de comando en algún sitio de la página, digamos adentro del área de contenido. En la demostración se ha usado Sprites de CSS para el link de comando, pero puedes crear un simple link textual como en el código a continuación.

    PLAIN TEXT
    1. id="wideView" href="#">Change View

    Interacción

    Ahora añadiremos una simple función jQuery que alternará la clase CSS llamada "wide". Esta clase determinará la forma en que se ve la sección contenido en el modo wide.

    PLAIN TEXT
    1. $(document).ready(function() {
    2. $("#wideView").click(function() {
    3. $("#content").toggleClass("wide");
    4. });
    5. });

    Por lo que la clase CSS "wide" no contendrá nada más que la propiedad del ancho programada en 900px (con paddings será 960px total).

    PLAIN TEXT
    1. #content.wide { width:900px;}

    Lo único que debes hacer a continuación es verificar la demostración y ver si puedes hacer clic en "wide window".

    Fuente: Janko at Warp Speed

    Por: Autor el lunes, noviembre 23, 2009
    Etiquetas: , , , , ,

    No hay comentarios:

    Publicar un comentario