Tabs CSS o Pestañas CSS con efecto desvanecimiento de jQuery

21 febrero 2010

Tabs CSS o Pestañas CSS con efecto desvanecimiento de jQuery

    2 comentarios

Como yo se que algunos por allí quedaron muy contentos con el post de como colocar varios widget en una sola sección, algo muy importante para hacer que nuestro blog cargue un poco mas rápido, y que los widget no ocupen tanto espacio, y lo mas importante, hacer ver nuestro blog mas atractivo, profesional e independiente...

Hoy, les traigo otro post, muy parecido pero diferente, Jeje... se trata de pestañas o tabs que al colocar el mouse y hacer clic sobre el abre el contenido pero con un efecto desvanecimiento muy llamativo, puedes ver la demostracion en mi blog de pruebas o en la pagina oficial del script, no se puede negar que es muy atractivo este recursos... Lo primero que tienes que hacer sera lo siguiente...

[1] Debes incluir la Libreria jQuery en tu blog, si ya la tienes no es necesario incluir este el siguiente codigo debajo de la etiqueta <head>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>


[2] Ahora, dirigete hasta la Edicion HTML y justo ante de ]]></b:skin> pega los siguiente codigo.

CSS para los Tabs



ul.tabs {
 margin: 0;
 padding: 0;
 float: left;
 list-style: none;
 height: 32px;
 border-bottom: 1px solid #999;
 border-left: 1px solid #999;
 width: 100%;
}
ul.tabs li {
 float: left;
 margin: 0;
 padding: 0;
 height: 31px;
 line-height: 31px;
 border: 1px solid #999;
 border-left: none;
 margin-bottom: -1px;
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
}
ul.tabs li a {
 text-decoration: none;
 color: #000;
 display: block;
 font-size: 1.2em;
 padding: 0 20px;
 border: 1px solid #fff;
 outline: none;
}
ul.tabs li a:hover {
 background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
 background: #fff;
 border-bottom: 1px solid #fff;
}


CSS para el contenido del tab

.tab_container {
 border: 1px solid #999;
 border-top: none;
 overflow: hidden;
 clear: both;
 float: left; width: 100%;
 background: #fff;
}
.tab_content {
 padding: 20px;
 font-size: 1.2em;
}


[3] Crear el JavaScript para el funcionamiento de los tab, justo ante de </head> pega el siguiente codigo.

<script type='text/javascript'>
$(document).ready(function()
{
  $(".tab_content").hide();
  $("ul.tabs li:first").addClass("active").show();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function()
     {
      $("ul.tabs li").removeClass("active");
      $(this).addClass("active");
      $(".tab_content").hide();

      var activeTab = $(this).find("a").attr("href");
      $(activeTab).fadeIn();
      return false;
  });
});
</script>


Eso es todo lo que debes hacer, cualquier duda, dejame el comentario

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


2 comentarios :

Suscribirse a: Enviar comentarios ( Atom )