DOMTab: Navegación por pestañas con CSS y DOMscripting
DOMTab nos permite crear estupendas interfaces divididas por pestañas por medio de Javascript no intrusivo.
Aplicar DOMTab a nuestras páginas es francamente sencillo. Primero llama al script desde la cabecera de tu documento
- <script type="text/javascript" src="domtab.js"></script>
El código html de nuestra página debe ser algo así,
- <div class="domtab">
- <ul class="domtabs">
- <li><a href="#t1">Test 1</a></li>
- <li><a href="#t2">Test 2</a></li>
- [... and so on ...]
- </ul>
- <div>
- <h2><a name="t1" id="t1">Proof 1</a></h2>
- <p>Test to prove that more than one menu is possible</p>
- <p><a href="#top">back to menu</a></p>
- </div>
- <div>
- <h2><a name="t2" id="t2">Proof 2</a></h2>
- <p>Test to prove that more than one menu is possible</p>
- <p><a href="#top">back to menu</a></p>
- </div>
- [... and so on ...]
- </div>
Tenemos, además, la opción de presentar un enlace donde se mostrarán todos los contenidos en una sola pantalla, por ejemplo para imprimir.
Puedes editar todas las opciones del script ya que todos lo que se espera del HTML son parámentros.
- tabClass:'domtab', // class para activar las pestañas
- listClass:'domtabs', // class de los menús
- activeClass:'active', // class del enlace actual
- contentElements:'div', // elements to loop through
- backToLinks:/#top/, // patrón para buscar enlaces "volver arriba"
- printID:'domtabprintview', // id del enlace para imprimir todo
- showAllLinkText:'show all content', // texto del enlace para imprimir todo
A la hora de dar estilo, tenemos a nuestra disposición tanto las clases e id utilizadas por el script como el resto de recursos a nuestro alcance por medio de CSS:
DOMTab: http://onlinetools.org/tools/domtabdata/
Otras entradas
Esta entrada fue publicada por Alma Fernández el Jueves, 24 de Agosto de 2006 y está archivada en: Javascript, Scripts. Puedes dejar un comentario, o enviar un trackback desde tu sitio.
