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í, [... 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.
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:
Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades
[...] 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 [...]
[...] 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. [...]
[...] 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 [...]
[...] Webmaster Libre » Archivo del weblog » DOMTab: Navegación por pestañas con CSS y DOMscripting [...]
Feed RSS de los comentarios de este post.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
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……
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
Que parte especifica del .css debo editar para cambiar el tamaño de la letra en las pestañas ?
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.