Webmaster Libre » Archivo del weblog » DOMTab: Navegación por pestañas con CSS y DOMscripting

Webmaster Libre » Archivo del weblog » 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

1. <script type="text/javascript" src="domtab.js">script>

El código html de nuestra página debe ser algo así,

1. <div class="domtab">
2. <ul class="domtabs">
3. <li><a href="#t1">Test 1a>li>
4. <li><a href="#t2">Test 2a>li>
5. [... and so on ...]
6. ul>
7. <div>
8. <h2><a name="t1" id="t1">Proof 1a>h2>
9. <p>Test to prove that more than one menu is possiblep>
10. <p><a href="#top">back to menua>p>
11. div>
12. <div>
13. <h2><a name="t2" id="t2">Proof 2a>h2>
14. <p>Test to prove that more than one menu is possiblep>
15. <p><a href="#top">back to menua>p>
16. div>
17. [... and so on ...]
18. 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.

1. tabClass:'domtab', // class para activar las pestañas
2. listClass:'domtabs', // class de los menús
3. activeClass:'active', // class del enlace actual
4. contentElements:'div', // elements to loop through
5. backToLinks:/#top/, // patrón para buscar enlaces "volver arriba"
6. printID:'domtabprintview', // id del enlace para imprimir todo
7. 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/