IdTabs – Tab simples, bonitos y fáciles de usar

Publicado por Nikko el dia 28 Nov 2007 - Guardado en Diseño Web, Javascript, Scripts Leido 3,017 Veces

idtabs.jpg

IdTabs es un plugin para jQuery. Que nos permite crear tab o añadir pestañas a nuestro sitio de una forma sumamente sencilla. Donde a su vez a estos tab podremos darle una apariencia o una funcionalidad completamente diferente, dependiendo donde pensamos utilizarlos. Básicamente jugar con los estilos y lograr por ejemplo cubos, a su vez jugando con imágenes, o bien los tab tradicionales, o tab interactuando con sitios externos mediante iframe, y otras opciones mas, igual de interesantes.

Ver demo - Descarga Ejemplo - Leer mas en IdTabs

 

Para utilizarlo necesitaremos de jquery , basta con descargar:

y copiar y pegar el código siguiente en el < head >

JavaScript:
<script type="text/javascript" src="jquery.js"></script>

Posteriormente nuestro script idTabs

JavaScript:
<script type="text/javascript">

(function($){
  $.fn.idTabs = function(){
    //Defaults
    var s = { "start":null,
              "return":false,
              "click":null };
 
    //Loop Arguments matching options
    for(var i=0; i<arguments.length; ++i) {
      var n = {}, a=arguments[i];
      switch(typeof a){
        case "object": $.extend(n,a); break;
        case "number":
        case "string": n.start = a; break;
        case "boolean": n["return"] = a; break;
        case "function": n.click = a; break;
      }; $.extend(s,n);
    }
     
    //Setup Tabs
    var self = this; //Save scope
    var list = $("a[@href^='#']",this).click(function(){
      if($("a.selected",self)[0]==this)
        return s["return"]; //return if already selected
      var id = "#"+this.href.split('#')[1];
      var aList = []; //save tabs
      var idList = []; //save possible elements
      $("a",self).each(function(){
        if(this.href.match(/#/)) {
          aList[aList.length]=this;
          idList[idList.length]="#"+this.href.split('#')[1];
        }
      });
      if(s.click && !s.click(id,idList,self)) return s["return"];
      //Clear tabs, and hide all
      for(i in aList) $(aList[i]).removeClass("selected");
      for(i in idList) $(idList[i]).hide();
      //Select clicked tab and show content
      $(this).addClass("selected");
      $(id).show();
      return s["return"]; //Option for changing url
    });
 
    //Select default tab
    var test;
    if(typeof s.start == "number" && (test=list.filter(":eq("+s.start+")")).length)
      test.click(); //Select num tab
    else if(typeof s.start == "string" && (test=list.filter("[@href='#"+s.start+"']")).length)
      test.click(); //Select tab linking to id
    else if((test=list.filter(".selected")).length)
      test.removeClass("selected").click(); //Select tab with class 'selected'
    else list.filter(":first").click(); //Select first tab
 
    return this; //Chainable
  };
  $(function(){ $(".idTabs").each(function(){ $(this).idTabs(); }); });
})(jQuery)
</script>

tab.jpg

CSS:
/* Style for Usual tabs */
.usual {
  background:#181818;
  color:#111;
  padding:15px 20px;
  width:500px;
  border:1px solid #222;
  margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  color:#FFF;
  background:#444;
}
.usual ul a:hover {
  color:#FFF;
  background:#111;
  }
.usual ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
  }
.usual div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }

Contenido

HTML:
<div class="usual" id="usual1">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1"> Contenido tab 1</div>
  <div id="tab2"> Contenido tab 2</div>
  <div id="tab3"> Contenido tab 3</div>
</div>
 
<script type="text/javascript">
  $("#usual1 ul").idTabs();
</script>

cubos.jpg

CSS:
#adv2 {
  width:500px;
  margin:6px auto;
  background:#181818;
}
#adv2 ul {
 display:block;
 width:50px;
 height:50px;
 float:left;
  text-decoration:none;

}
#adv2 li { float:left; }
#adv2 li.split { clear:both; }
#adv2 li a {
  display:block;
  height:25px;
  width:25px;
  line-height:22px;
  text-decoration:none;
 background:#222;
       color:#fff;
list-style:none;
}
#adv2 li a:hover {
  background:#0A0A0A;
}
#adv2 li a.selected {
  background:snow;
  color:#111;
  font-weight:bold;
}

#adv2 span {
  height:50px;
  display:block;
  line-height:45px;
  width:450px;
  float:right;
  background:#181818;
}

Contenido

HTML:
<div id="adv2">
  <ul>
    <li><a href="#ani1">1</a></li>
    <li><a href="#ani2">2</a></li>
    <li class="split"></li>

    <li><a href="#ani3">3</a></li>
    <li><a href="#ani4">4</a></li>
  </ul>
  <span>
    <p id="ani1"> Contenido opción 1 </p>
    <p id="ani2"> Contenido opción 2 </p>
    <p id="ani3"> Contenido opción 3 </p>
    <p id="ani4"> Contenido opción 4 </p>
  </span>
</div>

<script type="text/javascript">
  $("#adv2").idTabs(function(id,list,set){
    $("a",set).removeClass("selected")
    .filter("[@href='"+id+"']",set).addClass("selected");
    for(i in list)
      $(list[i]).hide();
    $(id).fadeIn();
    return false;
  });
</script>

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. muchas gracias por el aporte!

  2. angel - Gravatar

    angel

    28-11-2007

    Permalink

    Queria saber tb si es posible poner en este tab una loading al dar clik en cada pestana y una vez complete el cargador cargue la informacion en dicha pestana y asi en cada pestana ya que pienso hacer algo parecido pero cada pestana contendra mas informacion y fotitos.

    Si conocen algo parecido alo que me refiero por favor pasarme la url.

    gracias

  3. La verdad es que es una herramienta genial y muy muy fácil de usar. He intentado usarla para mi web, pero tengo un problema aparentemente absurdo con el css que me trae de cabeza.

    He conseguido modificar todas las partes del css de el primer ejemplo, pero, no se porqué, ni como, queda un espacio desde que empieza el contenedor hasta los tabs, mi pregunta:

    ¿Cómo puedo quitar ese espacio? ¿Cómo puedo hacer que los botones no estén centrados y se sitúen a la izquierda?

    Muchísimas gracias por todo vuestro esfuerzo, un abrazo.

  4. Cesar - Gravatar

    Cesar

    28-11-2007

    Permalink

    Hola, no termino de entender como es la instalacion del idtabs.

    Donde guardo el script idTabs, y donde el .css que haya elegido para usar?

    gracias



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: