Micaela 12 de noviembre de 2009 a las 09.02
   Imprimir artículo
elWebmaster.com

jQuery: Crear pesta√Īas m√°s org√°nicas en tu web


jquery1¬ŅAlguna vez has visto a un √°rea de contenido con pesta√Īas en una barra lateral que era un poco “desigual”? Las irregularidades pueden ser causadas por muchas cosas, pero le dan un look muy desalineado al sitio.

A falta de un t√©rmino mejor, llamaremos “pesta√Īas org√°nicas” a aquellas que se comportan con m√°s facilidad y soltura. ¬ŅQuieres saber c√≥mo lograrlas?

Haz clic aqu√≠ para visualizar el demo¬Ľ

El Plan

El plan es construir un √°rea que tenga pesta√Īas, algo bastante f√°cil de hacer desde cero con jQuery, y luego lograr que se comporte mejor. Por supuesto, lo mantendremos simple, y dejaremos el c√≥digo limpio y sem√°ntico. Lo central de la funcionalidad estar√° basado en el c√°lculo de la altura y la animaci√≥n entre esas alturas sobre la marcha.

El HTML

Tenemos un contenedor, luego una lista desordenada para las mismas pesta√Īas. Estas pesta√Īas tienen atributos rel equivalentes al ID de las listas desordenadas de abajo con las cu√°les est√°n relacionadas. El contenido es la lista desordenada dentro del div contenedor ‘all-list-wrap”. Esa es la clave aqu√≠, el envoltorio del contenido.

  1. <div id="organic-tabs">
  2.  
  3.    <ul id="explore-nav">
  4.       <li id="ex-featured"><a rel="featured" href="#" class="current">Featured</a></li>
  5.       <li id="ex-core"><a rel="core" href="#">Core</a></li>
  6.       <li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
  7.       <li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
  8.    </ul>
  9.  
  10.    <div id="all-list-wrap">
  11.  
  12.       <ul id="featured">
  13.          <li><a href="#">Full Page Background Images</a></li>
  14.          <li><a href="#">Designing for WordPress</a></li>
  15.          <!-- More... -->
  16.       </ul>
  17.  
  18.       <ul id="core">
  19.          <li><a href="#">The VERY Basics of HTML &amp; CSS</a></li>
  20.          <li><a href="#">Classes and IDs</a></li>
  21.          <!-- More... -->
  22.       </ul>
  23.  
  24.       <ul id="jquerytuts">
  25.          <li><a href="#">Anything Slider jQuery Plugin</a></li>
  26.          <li><a href="#">Moving Boxes</a></li>
  27.          <!-- More... -->
  28.       </ul>
  29.  
  30.       <ul id="classics">
  31.          <li><a href="#">Top Designers CSS Wishlist</a></li>
  32.          <li><a href="#">What Beautiful HTML Code Looks Like</a></li>
  33.          <!-- More... -->
  34.       </ul>
  35.  
  36.    </div> <!-- END List Wrap -->
  37.  
  38.  </div> <!-- END Organic Tabs -->

El CSS

No hay nada demasiado complicado, sólo programamos las cosas para que luzcan de la forma correcta:

  1. ul { list-style: none; }
  2. ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
  3. ul li a:hover { background: #fe4902; color: white; }
  4. ul li:last-child a { border: none; }
  5.  
  6. #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
  7.  
  8. #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
  9. #explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
  10. #explore-nav li.last { margin-right: 0; }
  11. #explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
  12. #explore-nav li a:hover { background-color: #111; }
  13.  
  14. #jquerytuts, #core, #classics { display: none; }
  15.  
  16. #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
  17. #explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
  18. #explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
  19. #explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

Algunas cosas interesantes que remarcar aquí:

En primer lugar, se trata s√≥lo de formato de l√≠nea √ļnica con interlineado sencillo entre todo. Nada de tabulaci√≥n extravagante.

En segundo lugar, hay un par de trucos. El selector .last elimina el margen derecho de las pesta√Īas, por lo que puedes conseguir que la pesta√Īa derecha se al√≠nee correctamente. El selector .last hijo elimina el borde del √ļltimo √≠tem de la lista, por lo que podemos conseguir l√≠neas entre cada enlace, pero no antes del primer elemento o despu√©s del √ļltimo.

El jQuery

El plan b√°sicamente explicado:

  1. Programa el envoltorio exterior en una altura particular del contenido actual
  2. Al hacer clic en una pesta√Īa…
  3. Programando el resaltado de la pesta√Īa a la pesta√Īa correcta
  4. Hacer fade out del contenido actual
  5. Hacer fade in del contenido actual
  6. Anima la altura del envoltorio exterior a la altura del contenido nuevo
  1. $(function() {
  2.  
  3.     $("#explore-nav li a").click(function() {
  4.  
  5.         // Figure out current list via CSS class
  6.         var curList = $("#explore-nav li a.current").attr("rel");
  7.  
  8.         // List moving to
  9.         var $newList = $(this);
  10.  
  11.         // Set outer wrapper height to height of current inner list
  12.         var curListHeight = $("#all-list-wrap").height();
  13.         $("#all-list-wrap").height(curListHeight);
  14.  
  15.         // Remove highlighting - Add to just-clicked tab
  16.         $("#explore-nav li a").removeClass("current");
  17.         $newList.addClass("current");
  18.  
  19.         // Figure out ID of new list
  20.         var listID = $newList.attr("rel");
  21.  
  22.         if (listID != curList) {
  23.  
  24.             // Fade out current list
  25.             $("#"+curList).fadeOut(300, function() {
  26.  
  27.                 // Fade in new list on callback
  28.                 $("#"+listID).fadeIn();
  29.  
  30.                 // Adjust outer wrapper to fit new list snuggly
  31.                 var newHeight = $("#"+listID).height();
  32.                 $("#all-list-wrap").animate({
  33.                     height: newHeight
  34.                 });
  35.  
  36.             });
  37.  
  38.         }        
  39.  
  40.         // Don't behave like a regular link
  41.         return false;
  42.     });
  43.  
  44. });

¬°Y a disfrutar!

Haz clic aqu√≠ para visualizar el demo¬Ľ

Haz clic aqu√≠ para descargar los archivos¬Ľ

Fuente: CSS- Tricks


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

Comentarios (5)

  1. DaniZ dice:

    Excelentes tabs pero , hay alguna forma de que al refrescar la p√°gina se posicione en el tab que se haya marcado anteriormente?

  2. Juan Manuel dice:

    @DaniZ

    Pues s√≠, aunque en el caso de ejemplo no es necesario dado que cargas todo el contenido en una s√≥la p√°gina, por eso no se usa la funcionalidad que mencionas =) Adem√°s debes tener en claro que Javascript es un lenguaje que funciona del lado del cliente por lo que al hacer refresh pierdes la informaci√≥n guardada en sus variables (salvo que mandes al backend los datos por AJAX, pero este ejemplo tiene la idea de ser sencillo y s√≥lo usar Javascript y CSS ūüėČ ).

    Aclarado esto, con javascript, puedes escuchar el evento “click” del usuario sobre una pesta√Īa y hacer una de dos cosas: O bien grabar una cookie en la computadora del usuario indicando en qu√© pesta√Īa se encuentra cada vez (y levantarla al ingresar a la p√°gina), o bien pasar un par√°metro a la URL (por get), cosa que al refrescar la p√°gina se mantenga dicho par√°metro y, de nuevo, leerlo al inicializar la aplicaci√≥n (p√°gina).

    Como ves son recursos totalmente posibles de hacer, imaginando que tu proyecto lo amerita. Si no, no te recomiendo llevar a cabo esto dado que hacer refresh en una página dinámica sería como cerrar y abrir un programa sin los cambios guardados, es decir, se perderán los datos.

    Espero que mis consejos te sean de ayuda, cualquier consulta, aquí estaremos ^_^

    ¬°Saludos!

  3. DaniZ dice:

    Pfff ando un tanto perdido … hace tiempo que no toco esto… ¬ŅComo ser√≠a para pasarlo por get en el ejemplo que pones?

  4. Juan Manuel dice:

    @DaniZ

    Supongamos que los par√°metros elegidos sean: url-raiz-de-tu-sitio&solapa=2, url-raiz-de-tu-sitio&solapa=3 y url-raiz-de-tu-sitio&solapa=4.

    Al principio lees si hay par√°metros en la url (usando con window.location), si no dejas todo en la solapa 1.

    Con cada clic del usuario, seg√ļn en qu√© solapa sea, seteas un handler que haga:

    window.location = url;

    …donde “url” ser√° una variable que contenga la url de tu sitio (ra√≠z) + el par√°metro.

    Ya est√°, si el usuario hace refresh, quedar√° la url √ļltima que estaba utilizando.

    Tambi√©n puedes ahorrarte el js que setea la url actual y crear anclas en HTML ūüėČ

    ¬°Saludos!

  5. Nathaly dice:

    Hola! me gust√≥ mucho el men√ļ era justo lo que nadaba buscando =) . Solo me quedo una duda que quiz√°s me puedas ayudar.
    Ver√°s implement√© el men√ļ en un sitio que estoy realizando y funciona perfecto, lo que necesito es que al mismo tiempo que se carga la lista nueva de links de cada pesta√Īa se cambie el contenido de un donde tengo tres flash diferentes (uno para cada opci√≥n del men√ļ).
    El problema es que no le puedo poner el mismo “id” que a los links del “ul” en este div ya que tiene caracter√≠sticas diferentes a las del menu en css.

    Quisiera saber si hay alguna soluci√≥n usando el mismo men√ļ o si debo hacerlo por otro medio :/

    Saludos!

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