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