IdTabs - Tab simples, bonitos y fáciles de usar
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 >
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>
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:
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">
-
<li class="split"></li>
-
-
</ul>
-
<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) said,
Wrote on November 28, 2007 @ 10:16
muchas gracias por el aporte!
Tweet’l - Acortar direcciones URL demasiado largas « Xyberneticos said,
Wrote on November 30, 2007 @ 22:11
[...] El resultado , conseguir de esto: http://xyberneticos.com/index.php/2007/11/28/idtabs-tab-simples-bonitos-y-faciles-de-usar/ [...]
angel said,
Wrote on December 1, 2007 @ 14:26
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 said,
Wrote on December 28, 2007 @ 20:19
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.