
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:
- jquery.js (guardar como)
y copiar y pegar el código siguiente en el < head >
Posteriormente nuestro script idTabs
(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>

.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
<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>

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









Lucas (wydblog)
28-11-2007
Permalink
muchas gracias por el aporte!
Tweet’l - Acortar direcciones URL demasiado largas « Xyberneticos
28-11-2007
Permalink
[...] El resultado , conseguir de esto: http://xyberneticos.com/index.php/2007/11/28/idtabs-tab-simples-bonitos-y-faciles-de-usar/ [...]
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
Diego Jiménez
28-11-2007
Permalink
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.
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