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 >
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>
Contenido
}
#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
<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>
Link to this page
