Tab View - Menú web mediante pestañas.

Este es un control DHTML para utilizar menú de opciones mediante Tabs o pestañas.

Este permite al usuario cambiar entre contenido web (texto, imágenes etc ..) que se cargan en cada una de las pestañas del control, y puede ser muy útil para mostrar la información sin tener que utilizar distintas páginas, evitando el tener que recargarlas desde el servidor.

Nota: También incluye una versión PHP ( archivo sample.php ) que funcionará incluso si el navegador del usuario tiene deshabilitado Javascript.

Configuración del control en la página:

Para añadir mas pestañas al control, abre el archivo sample.html, y busca en el código fuente el siguiente bloque, y elimina o añade los que debas utilizar. (Este bloque permite crear los botones o tabs.)

<div class="Tabs" style="width: 452px;"> <a class="Current">Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> <a>Tab 4</a> </div>

Y para establecer el contenido web que mostrará cada una de las pestañas, busca el bloque de código siguiente, y añade tantos DIVS como hayas creado anteriormente.

<div class="Pages" style="width: 450px; height: 300px;"> <div class="Page" style="display: block;"><div class="Pad">Contenido de la página 1</div></div> <div class="Page" style="display: none;"><div class="Pad">Contenido de la página 2</div></div> <div class="Page" style="display: none;"><div class="Pad">Contenido de la página 3</div></div> <div class="Page" style="display: none;"><div class="Pad">Contenido de la página 4</div></div> </div>

Por último, al final de la sección Body de la página, deberás llamar al archivo Javascript tab-view.js que permite cargar e inicializar el control, colocando el siguiente bloque de código:

<script type="text/javascript" src="tab-view.js"></script> <script type="text/javascript"> tabview_initialize('TabView'); </script>