Webmaster Libre

Hace tiempo hablabamos de DOMTab un script que nos permitía crear un interfaz tabular de forma relativamente simple. Hoy, a través de Anieto2k, descubro Javascript Tabifier.

Javascript Tabifier te permite crear interfaces tabulares sin necesidad de establecer una lista de enlaces o una serie de anclas. Además, el estilo de las pestañas se hace mediante CSS y se degrada sin problemas para los usuarios sin Javascript.

Su implementación no podría ser más sencilla.

1. Primero rodearemos todo el código a introducir en pestañas con un div con clase tabber
   1. <div class="tabber">
   2.   <h3>Section One</h3>
   3.   Section one content.
   4.  
   5.   Section two content.
   6. </div>
2. Luego iremos añadiendo un div con la clase tabbertab alrededor de cada sección. Por defecto las pestañas como título utilizan el título de la sección. En caso de querer especificar otro incluiremos un atributo title
   1. <div class="tabber">
   2.  
   3.   <div class="tabbertab">
   4.     <h3>Section One</h3>
   5.     Section one content.
   6.   </div>
   7.  
   8.   <div class="tabbertab" title="MyTabTitle">
   9.     Section two content.
   10.   </div>
   11.  
   12. </div>

   Los elementos “tabbertab” siempre deben ser hijos del elemento “tabber”

3. Cargamos el script en la cabecera
   1. <script type="text/javascript" src="tabber.js">
   2. </script>

Finalmente, el script convertirá el código en algo así:

Fíjate que el contenedor ha cambiado su clase de tabbertab a tabberlive, lo cual te permite definir estilos diferentes para usuarios con y sin javascript.

Javascript Tabifier:
http://www.barelyfitz.com/projects/tabber/

Otras entradas

• TargetOrder: reordenar tablas sin drag&drop
• Lanzados Plone 2.5.1 y 2.1.4
• Quickref: Buscador de documentación para desarrolladores
• Webmaster Libre en Stylecrunch
• Color Oracle: Comprobando tus esquemas de color