Javascript Tabifier: Crea un interfaz tabular automáticamente

Alma Fernández 12/09/2006

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

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.

Primero rodearemos todo el código a introducir en pestañas con un div con clase tabber

Section One

Section one content.

Section two content.
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

Section One

Section one content.

Section two content.

Los elementos “tabbertab” siempre deben ser hijos del elemento “tabber”
Cargamos el script en la cabecera

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

Section One

Section one content.

Section two content.

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 que pueden interesarte:

Javascript, Scripts

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Webmaster Libre