Interfaz de navegación por pestañas con Ajax y PHP

Para cuando se pulse una pestaña o solapa se muestren los contenidos asociados a esa pestaña. En la interfaz habrá varias pestañas y pulsando cada una se mostrarán unos contenidos específicos de esa solapa, todos en el mismo espacio.

Es una interfaz que habremos podido ver en varias páginas web. Nosotros vamos a realizarla con PHP y Ajax, para que se soliciten los contenidos de cada pestaña al servidor y se muestren sin necesidad de recargar la página. Utilizaremos el framework Xajax, que nos permite programar fácilmente páginas con Ajax usando PHP.

El objetivo final del ejercicio lo podemos ver en:

Maquetación de la interfaz con CSS y HTML

Para maquetar previamente el sistema de pestañas vamos a utilizar por un lado HTML y por otro CSS para definir el aspecto. En un artículo anterior de DesarrolloWeb.com explicamos como maquetar la interfaz de pestañas. El esquema es exactamente el mismo ahora. El único cambio es que hemos tenido que crear otra clase (class de CSS) para definir el aspecto de las pestañas que están inactivas. Y además hemos creado unas declaraciones de estilos para forzar el color de los enlaces.

Nuestro HTML en este ejercicio quedará así:

<div class="pestanas">
   <ul>
   <li id="pestana0" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(0))"> Intereses</a></li>
   <li id="pestana1" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(1))"> Portfolio</a></li>
   <li id="pestana2" class="pestanainactiva"><a href="javascript:void(xajax_cambia_contenido(2))"> Contacto</a></li>
   </ul>
   <div id="cuerpopestanas" class="cuerpopestanas">
   </div>
</div>

Leer el artículo Maquetación de un recuadro con pestañas con CSS para más información.

En el HTML ya podemos ver llamadas a una función Javascript xajax_cambia_contenido(), que en realidad es una función, llamada cambia_contenido(), que hemos definido con PHP y registrado con Xajax para poder invocarla desde Javascript. Estas llamadas a xajax_cambia_contenido() envían un parámetro, que es el número de la pestaña pulsada.

Aparte, conviene percatarse de que cada pestaña construida tiene un identificador, por ejemplo pestana0 o pestana1, que luego vamos a necesitar, en nuestra función PHP cambia_contenido(), para referirnos a estas pestañas y cambiarles el aspecto al ser pulsadas.

Además, como decía, en el CSS del ejemplo vamos a tener dos clases que merece la pena que recordemos:

li.pestanainactiva, con los estilos CSS de las pestañas cuando no están pulsadas.
li.pestanaseleccionada, con los estilos CSS de las pestañas cuando sí que están pulsadas.

Otra cosa con respecto al HTML, es que en la capa con id="cuerpopestanas" es donde vamos a mostrar los distintos contenidos de las solapas.

Por último, os habréis fijado que en el HTML están todas las solapas inactivas y ningún contenido en el cuerpo de las pestañas. Esto es porque el contenido del cuerpo de la interfaz lo vamos a inicializar desde Javascript cuando se termine de cargar la página, para que en ese momento se conecte por ajax al servidor y se traiga los contenidos de la pestaña que queramos que aparezca seleccionada por defecto.

Usuarios que han visto este tema también han visto...

- Listas dinamicas enlazadas
- Detectar el idioma y país del usuario con Javascript
- Links en caja en Javascript
- Formulario que multiplica números en JavaScript
- Diferencias entre Java y JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento