El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

DOMTab: Navegación por pestañas con CSS y DOMscripting

DOMTab

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

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

Proof 1

Test to prove that more than one menu is possible

back to menu

Proof 2

Test to prove that more than one menu is possible

back to menu

[... and so on ...]

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/

Javascript, Scripts

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

9 Respuestas a “DOMTab: Navegación por pestañas con CSS y DOMscripting”

Agrega tu comentario

  1. Felipe Reyes dice:

    no se que me pasaba, como no habia encontrado esta pagina es super espectacular…..
    me gusta progarmar el php y no tenia la forma de darle alegria a mis script….
    los felicito……

  2. Versvs dice:

    Yo aquí buscando recursos para una pequeña web que estoy haciendo…. ¿Y dónde mejor que aquí para ir a buscar pequeños (y no tan pequeños) tips en castellano sobre diseño web? ¡Me quedo el DOMtab!

    Un saludo ;)

  3. Cesar dice:

    Que parte especifica del .css debo editar para cambiar el tamaño de la letra en las pestañas ?

  4. Valeria dice:

    Hola a todos quisiera cosultarles si alguno probo usar Domtab en sus sitios. Resulta q yo necesito usarlo como un subformulario pero la cantidad de solapas supera el ancho de mi pagina principal. Existe alguna manera de mostrarlo con include de php con una barra de desplazamiento horizontal???. Nose si me expliqué bien.

Trackbacks/Pingbacks

  1. [...] Efectos javascript Accessible Dropdown menu gazingus.org – Using Lists for DHTML Menus, (2) Apycom DHTML Menu: Cascading Drop Down Menus A List Apart: Let Them Eat Cake Drag & Drop Sortable Lists with JavaScript and CSS Expanding Nested Lists Collapsible Explorer navigation with pureDOMexplorer easy-designs.net: Replace Select Cut & Paste: Cool CSS Menu: (1), (2) [brothercake] Docking boxes (dbx) Vertical expanding menu in CSS A List Apart – Complex Dynamic Lists: (1), (2), (3) Dynamic Drive DHTML Scripts- DD Tab Menu Intenta: Componentes: MenuBar I JavaScript Menu. Deluxe Menu. Tryit Editor v1.4 EffectsPack gazingus.org – DOM-Scripted Lists, Revisited JavaScript Toolbox – DHTML Expandable, Collapsable Tree General Disposition for a Folder Tree I panel Basic DOM Menue I General xhtml Menu Disposition General Disposition for scroll out and back Menu FreeStyle Menus – TwinHelix Crack Ajax – Tabbed Interface Project ypSlideOutMenus Mini Slide Navigation | Sandbox | Stephen Clark (sgclark.com) Intenta – Mini Slide Navigation con Flash y XML Toggle (show/hide) elements in a Definition List havocStudios: Ajax Tabs Demo Ajax Workshop 2: Building Tabbed Content DOMTab – Navigation tabs with CSS and DOMscripting Accessible Website Menu: Ultimate Drop Down Menu 4.45 – List-based Semantic DHTML Menu Alsacreations, XHTML and CSS drop-down menu frequency decoder | animated miniTabs CSS event:Selectors Webmaster Libre » Menus desplegables con Javascript Intenta » Menu con CSS y Javascript Menú al estilo Slashdot – aNieto2K Webmaster Libre » Archivo del weblog » DOMTab: Navegación por pestañas con CSS y DOMscripting [...]

  2. [...] 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. [...]

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

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

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

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 5 años. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna