Agregando elementos en solapas

En la última entrada referida a solapas o tabs había un comentario de Malina en el que preguntaba si era posible colocar las categorias del blog dentro de esas solapas. Unos días después, Haîmat se sumaba a esa pregunta y la extendía, hablando de elementos en general y aportando un ejemplo.

En algún momento, hace ya tiempo, había mostrado una forma de incluir las etiquetas en solapas pero es una solución que, si bien funciona, nunca me convenció demasiado así que aprovechamos el ejemplo para intentar otro método que me parece más flexible.

El problema que surge para explicar esto es que no hay un solo método para incluir solapas, hay muchos, hay decenas de scripts y todas son diferentes aunque en general, tienen una estructura similar, en una lista ordenada (UL LI) se muestran las solapas y abajo, en distintos DIVs, se agrega el contenido de cada una de ellas.

Este ejemplo usará Fabtabulous que es uno de esos scripts que ya he utilizado alguna otra vez (más información)

Coloco entonces los scripts necesarios antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype", &quot;1.6.0.3&quot;);
google.load("scriptaculous", &quot;1.8.2&quot;);
</script>
<script src='URL_fabtabulous.js' type='text/javascript'/>

Debajo de eso, el CSS que puede tener cualquier propiedad y que es lo que podemos personalizar.

<style type='text/css'>
#tabs-wrapper {
width: 320px;
float: right;
margin: 30px 0;
word-wrap: break-word;
overflow: hidden;
}
#tabs {
list-style-type: none;
margin: 0;
padding: 0;
}
#tabs li {
float: left;
list-style-type: none;
margin-right: 1px;
}
#tabs a {
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background-color: #BBB;
color: #FFF;
float: left;
font-family: Arial;
font-size: 16px;
font-weight: bold;
height: 28px;
line-height: 30px;
outline: none;
margin: 0;
padding: 0 8px;
text-decoration: none;
}
#tabs a.active-tab {
background-color: #EEE;
color: #444;
outline: none;
}
.demoTabs {
color: #444;
}
.panel {
background-color: #EEE;
clear: both;
display: none;
padding: 10px;
}
.panel.active-tab-body {
display: block;
}
</style>

Colocar contenido en una solapa es sencillo si se trata de códigos escritos por nosotros; en la primer parte van las solapas en si mismas con sus títulos:

<ul id='tabs'>
<li><a class='active-tab' href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>

Debajo, el contenido de cada una:

<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<div>El contenido de la primera solapa</div>
</div>
<div class='panel' id='tab2'>
<div>El contenido de la segunda solapa</div>
</div>
<div class='panel' id='tab3'>
<div>El contenido de la tercera solapa</div>
</div>
</div>

El problema surge porque no podemos colocar un elemento de Blogger ya que los widgets deben estar en una sección y una sección sólo puede contener widgets:

<b:section class='unaClase' id='unNombre'>
  ... aquí no nos permiten agregar códigos ...
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
  ... aquí no nos permiten agregar códigos ...
</b:section>

Pero si podemos armar las cosas de este otro modo:

... aquí podemos agregar códigos ...
<b:section class='unaClase' id='unNombre'>
<b:widget id='otroNombre' locked='false' title='TITULO' type='TIPO'/>
</b:section>
... aquí podemos agregar códigos ...

Así que podríamos armar las solapas de ese modo, creando secciones en cada una de ellas y de tal modo, podríamos mover los elementos que ya tenemos o bien agregar otros directamente desde la ventana de Diseño | Elementos de la página. Para eso, vamos a colocar las solapas en un DIV al que le daremos las mismas propiedades que a la sidebar y que en este caso, para ser original, tendrá como nombre id='tabs-wrapper':

<div id='tabs-wrapper'>
<ul id='tabs'>
<li><a class="active-tab" href="#tab1">Tab 1</a>
<li><a href="#tab2">Tab 2</a>
<li><a href="#tab3">Tab 3</a>
</ul>
<div class='demoTabs'>
<div class='panel active-tab-body' id='tab1'>
<b:section class='solapa1' id='solapa1' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab2'>
<b:section class='solapa2' id='solapa2' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='panel' id='tab3'>
<b:section class='solapa3' id='solapa3' maxwidgets='1' showaddelement='yes'/>
</div>
</div>
</div>

Ahora, lo que veremos en la ventana de edición será algo así:

Y haciendo click en las solapas, accederemos a cada una de ellas, de la misma manera que ocurre en el blog y podremos agregar un gadget cualquiera.

Obviamente, puede haber detalles que modificar o adaptar de acuerdo a cada elemento pero, para eso, cada sección tiene su propio ID y su propia clase así que deberías ser sencillo hacerlo o tan complicado como hacerlo en la misma sidebar.