Micaela 23 de noviembre de 2009 a las 13.09
   Imprimir artículo
elWebmaster.com

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


jquery2YouTube 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:

  1. <div id="header"></div>
  2. <div id="main">
  3.     <div id="content"></div>
  4.     <div id="sidebar"></div>
  5.     <div id="comments"></div>
  6. </div>
  7. <div id="footer"></div>

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.

  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.

  1. <a id="wideView" href="#">Change View</a>

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.

  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).

  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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Pedro dice:

    Muy interesante, el efecto en sí no es nada del otro mundo, pero lo que es muy remarcable es lo útil que resultará en ciertas interfases de sitios o webapps, para que el usuario esté cómodo eligiendo cómo quiere acomodar los paneles.

    Otro ejemplo bueno son los paneles del tablero de WordPress, que uno los puede arrastrar y configurar.

    ¡Muy buen artículo!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder