uso Tabbox

Documentación y ejemplos de uso de Tabbox.


requisitos

Para usar Tabbox necesitamos incluir en nuestro documento el framework JavaScript Prototype, la librería de efectos Script.aculo.us , Usefull y por último Tabbox. El código sería algo como esto: 

       
 <head>
   .
   .
  <script type="text/javascript" src="ruta/a/prototype.js"></script>
  <script type="text/javascript" src="ruta/a/scriptaculous.js?load=effects"></script>
  <script type="text/javascript" src="ruta/a/usefull.js"></script>
  <script type="text/javascript" src="ruta/a/tabbox.js"></script>
   .
   .
 </head>

uso

Tabbox necesita una estructura mínima en nuestro documento HTML: un elemento 'div' contenedor y el contenido formado por otros elementos que conformarán las fichas con pestañas a los que se les aplicará la clase 'tab-panel' (veremos, más adelante, que no es obligatorio que la clase se llame de esta forma). El código: 

       
 <div id="contenedor-fichas">
  <div class="tab-panel">contenido 1</div>
  <div class="tab-panel">contenido 2</div>
   .
   .
  <div class="tab-panel">contenido n</div>
 </div>

Ahora necesitamos definir las pestañas. Este sería el código básico: 

       
 <div id="contenedor-pestanyas">
  <ul>
   <li><a href="#" class="tab-jumper">pestaña 1</a></li>
   <li><a href="#" class="tab-jumper">pestaña 2</a></li>
          .
          .
   <li><a href="#" class="tab-jumper">pestaña n</a></li>
  </ul>
 </div>

Tal como se ve en el código de arriba, para definir las pestañas utilizamos la clase 'tab-jumper'. Aunque se puede apuntar con el atributo 'href' al panel en cuestión no es absolutamente necesario: la primera pestaña apunta al primer 'div', la segunda al segundo y así sucesivamente.

Si además de pestañas queremos definir controles (anterior y siguiente) entonces: 

       
 <div id="contenedor-controles">
  <a id="prevcontrol" class="tab-control" rel="prev" href="#">anterior</a>
  <a id="nextcontrol" class="tab-control" rel="next" href="#">siguiente</a>
 </div>

Si necesitamos saltar a otro documento desde la primera o última ficha, podemos sustituir en el atributo 'href' el carácter '#' por un URI.

Instanciamos un objeto Tabbox: 

       
 <script type="text/javascript">
 /* <![CDATA[ */
 
  new TabBox('contenedor-fichas', 'contenedor-pestanyas', {
   controlsContainer: 'contenedor-controles',
   effect: 'appear',
   includeGoUp: false,
   jsCtnerOffsetX: 20
  });
 
 /* ]]> */
 </script>

El primer argumento del constructor es el contenedor de las fichas, el segundo es el contenedor de las pestañas y el tercero es una lista de opciones de configuración en formato JSON.

Se pueden incluir enlaces internos entre fichas. En tal caso hay que aplicarles a los enlaces la clase 'tab-anchor'. El código: 

       
 <a href="#commentform" class="tab-anchor">texto enlace</a>

Un poco de CSS del aplicado a las pestañas de este documento (meramente como ejemplo): 

       
 #contenedor-pestanyas{display:none;}

 #contenedor-fichas{position:relative; left:0; top:0; overflow:hidden; width:99%;}
 
 .tab-panel{position:absolute; left:0; top:0;}
 
 .tab-control{position:absolute; display:block;}
 
 #prevcontrol{left:10px; bottom:5px;}
 
 #nextcontrol{right:10px; bottom:5px;}

ejemplos

  • Koko → tabbox funcionando como un libro.

opciones de configuración

En la siguiente tabla se describen las opciones de configuración de Tabbox.

opción
(tipo)
(valor por defecto)
(versión) 		Descripción
afterShow
(función)
(null)

Función a ejecutar después de mostrar una ficha.
anchorClassName
(cadena)
(tab-anchor)

Clase a aplicar a los enlaces internos entre fichas.
beforeShow
(función)
(null)

Función a ejecutar antes de mostrar una ficha.
controlClassName
(cadena)
(tab-control)
(1.0.3)

Clase a aplicar a los controles.
controlsContainer
(elemento)
(null)
(1.0.3)

Elemento contenedor de los controles.
cookieName
(cadena)
(TBC)

Cuando se utiliza la opción rememberTab se utilizan Cookies para almacenar la información. Con esta opción podemos determinar el nombre de las cookies.

disabledClassName
(cadena)
(tab-disabled)

Clase CSS que Tabbox aplica a los controles deshabilitados.
duration
(flotante)
(1)

Duración del efecto aplicado en segundos.
effect
(cadena)
(scroll)

Efecto a aplicar al mostrar fichas: 'none' o 'appear'.
goUpClassName
(cadena)
(go-Up)

Clase a aplicar al control go-Up.
goUpOffsetX
(entero)
(0)

Desplazamiento horizontal a aplicar al control go-Up. Util para posicionarlo en el caso de que la posición por defecto no se ajuste a nuestras necesidades.

goUpOffsetY
(entero)
(0)

Desplazamiento vertical a aplicar al control go-Up. Util para posicionarlo en el caso de que la posición por defecto no se ajuste a nuestras necesidades.

goUpText
(cadena)
(arriba)

Texto que mostrará el control go-Up.

includeGoUp
(boolean)
(false)

Si true incluye un control go-Up. Este control se pone en la parte de abajo del contenedor de las fichas y permite hacer scroll hasta el principio del contenedor. Es útil en fichas muy grandes.

initial
(entero o cadena)
(0)

Permite indicar qué ficha se mostrará al inicio: puede ser el 'id' del elemento o la posición de la ficha con respecto a las demás empezando por cero.

jumperClassName
(cadena)
(tab-jumper)

Clase que se les aplica a los controles tipo 'jumper' (pestañas).
jsCtnerOffsetX
(entero)
(0)

Desplazamiento horizontal a aplicar al contenedor de las pestañas. Util para posicionarlo en el caso de que la posición por defecto no se ajuste a nuestras necesidades.

jsCtnerOffsetY
(entero)
(0)

Desplazamiento vertical a aplicar al contenedor de las pestañas. Util para posicionarlo en el caso de que la posición por defecto no se ajuste a nuestras necesidades.

panelClassName
(cadena)
(tab-panel)

Clase que se les aplica a las fichas.
rememberTab
(boolean)
(false)

Si true Tabbox recordará entre carga y carga la última pestaña abierta. Util si existe, por ejemplo, paginación de resultados.

selectedClassName
(cadena)
(tab-selected)

Clase que se le aplica al control 'jumper' (pestaña) seleccionado.
tabsPosition
(cadena)
(top)

Permite determinar la posición de las pestañas: 'top' o 'bottom'.