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 >

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

Posteriormente nuestro script idTabs

PLAIN TEXT
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

PLAIN TEXT
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

PLAIN TEXT
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

PLAIN TEXT
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

PLAIN TEXT
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>