Pestañas simples con jQuery

JMiur

Esta es una forma sencilla de crear pestañas en la sidebar utilizando jQuery.

Necesitamos, claro, la librería agregada antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

y debajo, el script en si mismo:

<script type='text/javascript'>

//<![CDATA[
$(document).ready(function(){
var alltabs = $('div.tab');
var tabs = $('#tabs');
alltabs.first().show();
tabs.find('li:first').addClass('on');
tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})
})
//]]>
</script>

A eso, le agregamos el CSS que puede ser personal; en este ejemplo es algo así:

<style>
/* el rectángulo contenedor */
.tabber { width:400px; }
#tabs { width:100%; }
/* cada pestaña es un item de una lista */
#tabs li {
background-image: -moz-linear-gradient(100% 100% 90deg, #AAA, #FFF);
background-image: -webkit-gradient(linear, left bottom, left top, from(#AAA), to(#FFF));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFFFF", EndColorStr="#FFAAAAAA");
-moz-border-radius: 10px 0 0 2px;
-webkit-border-radius:10px 0 0 2px;
border-radius:10px 0 0 2px;
border-right: 2px solid #000;
float: left;
height: 2em;
line-height: 2em;
width: 75px;
}
/* esta es la pestaña activa */
#tabs li.on {
background-image: -moz-linear-gradient(100% 100% 90deg, #AA4, #FF8);
background-image: -webkit-gradient(linear, left bottom, left top, from(#AA4), to(#FF8));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFF88", EndColorStr="#FFAAAA44");
}
/* cada pestaña es un enlace */
#tabs li a {
color: #666;
font-family: Verdana;
font-size: 18px;
padding: 0 0 0 15px;
text-decoration: none;
}
/* el enlace activo */
#tabs li.on a { color: #660; }
/* efecto hover sobre las pestañas */
#tabs li a:hover { color: #330; }
/* efecto hover sobre la pestaña activa */
#tabs li.on a:hover { color: #000; }
/* los contenidos ocultos */
.tab {
clear: both;
display: none;
font-size: 12px;
padding: 5px;
}
</style>

¿Cómo se utiliza? Colocando el HTML allí donde queremos mostrarlo. las pestañas son una lista ordenada donde cada item tiene un atributo rel específicoy debajo de esa lista, colocamos un div con el contenido de cada pestaña:

<div class='tabber'>
<ul id='tabs'>
<li><a href='#' rel='div.tab1'> titulo 1 </a></li>

<li><a href='#' rel='div.tab2'> titulo 2 </a></li>
<li><a href='#' rel='div.tab3'> titulo 3 </a></li>
</ul>

<div class='tab tab1'>
....... el contenido de la pestaña 1 .......
</div>
<div class='tab tab2'>
....... el contenido de la pestaña 2 .......
</div>
<div class='tab tab3'>

....... el contenido de la pestaña 3 .......
</div>
</div>

En Blogger, tenemos la posibilidad de agregar gadgets así que, si queremos que alguno de ellos quede dentro de una de las pestañas, lo que debemos hacer es colcoarlo dentro de una sección [ ver detalles 1 | 2 ]

Un ejemplo:

<div class='tabber'>
<ul id='tabs'>
<li><a href='#' rel='div.tab1'> titulo 1 </a></li>
<li><a href='#' rel='div.tab2'> titulo 2 </a></li>

<li><a href='#' rel='div.tab3'> titulo 3 </a></li>
</ul>
<div class='tab tab1'>
<b:section class='tabs' id='pestania1' maxwidgets='1'/>

</div>
<div class='tab tab2'>
<b:section class='tabs' id='pestania2' maxwidgets='1'/>
</div>
<div class='tab tab3'>
<b:section class='tabs' id='pestania3' maxwidgets='1'/>

</div>
</div>