Versiones del sitio de las pestañas con JavaScript
Introducción
En el tema anterior expuse ejemplos de contenedores de pestañas con JavaScript. Los recursos CSS y JS se encontraba en esa página. Pero los que finalmente voy a usar en este sitio se localizan en otros recursos y presentan algunas modificaciones con respecto a los anteriores. Principalmente difieren en el uso de un elemento <button>
en cada pestaña para mejorar la accesibilidad y en la adjudicación de eventos tras la carga de la página, evitando incluir atributos onclick
en el HTML que se carga inicialmente. Estos dos principios son algunos de los que estoy intentando llevar a cabo y que ya expuse en un artículo sobre la actualización de este sitio. Ya que he remodelado estos componentes también aprovecho para actualizarlos en ese aspecto.
En este tema expongo los mismos ejemplos usando la versión del sitio de esos componentes. El código común para todos los ejemplos es este:
Código CSS (archivo base.css, componente pestanya-filas, tres primeros ejemplos)
Código CSS (archivo base.css, componente pestanya-cuerpos, último ejemplo)
Código JS (componente pestanyas del módulo Wextensible.general, archivo general.js, todos los ejemplos)
Código CSS y JS en este documento
Estos códigos son copias de los que estoy usando en este sitio, pero podría ser modificado posteriormente. Vea los recursos originales con el botón Código en la barra de botones superior de este documento.
Contenedor de pestañas en dos filas de una tabla
Ejemplo: Componente CSS pestanya-filas, con una fila de pestañas
id=tabdiv-0 Contenido de la Primera pestaña.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. id=tabdiv-1 Otro contenido para la PESTAÑA 2ªid=tabdiv-2 El último contenido de la Pestaña 3 |
Código HTML
Contenedor de pestañas dentro de una pestaña
Ejemplo: Componente CSS pestanya-filas
id=tabdiv-100
id=tabdiv-101 id=tabdiv-102 |
Código HTML
Contenedor con varias filas de pestañas
Ejemplo: Componente CSS pestanya-filas, con varias filas
id=tabdiv-300 id=tabdiv-301 id=tabdiv-302 id=tabdiv-303 id=tabdiv-304 id=tabdiv-305 id=tabdiv-306 id=tabdiv-307 |
Código HTML
Contenedor de pestañas en cuerpos de tabla
Ejemplo: Componente CSS pestanya-cuerpos
Contenido de la Primera pestaña. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sollicitudin libero id elit. Sed euismod nonummy neque. Nam dignissim urna vel urna. Nunc aliquet. Nunc vel dui mattis magna varius condimentum. Etiam lacus enim, aliquam ultricies, luctus ut, placerat id, lectus. Vestibulum laoreet commodo tortor. Nunc eget urna. Suspendisse ac orci. Vivamus quis tortor facilisis velit interdum blandit. | ||
Otro contenido para la PESTAÑA 2ª | ||
El último contenido de la Pestaña 3 |