Continuamos con el manual de PHP y Ajax con Xajax esta vez mostrando como se haría una interfaz de navegación de pestañas, con interacción de usuario. 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: http://www.desarrolloweb.com/articulos/ejemplos/ajax/xajax/pestanas.php


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.

Código PHP de la función para cambiar la pestaña pulsada

Con PHP y ayudándonos de Xajax vamos a definir el comportamiento de pulsar una de las pestañas de la interfaz. Tenemos que hacer lo siguiente:

• Conseguir el contenido de la pestaña pulsada y colocarlo en la capa "cuerpopestanas".
• Cambiar la clase CSS (class de CSS) de la pestaña pulsada a aquella donde habíamos guardado el estilo de las solapas cuando están pulsadas li.pestanaseleccionada.
• Para las pestañas que quedan inactivas, cambiar la clase de CSS que hemos indicado en li.pestanainactiva.

La función es la siguiente:

function cambia_contenido($num_pestana){
   //instanciamos el objeto para generar la respuesta con ajax
   $respuesta = new xajaxResponse('ISO-8859-1');
   
//defino contenidos de las pestañas
   $contenido_pestanas = array(
      'Texto 0',
      'Texto solapa 2',
      'Texto de la pestana 3');
   //Pongo el texto nuevo en el cuerpo de la interfaz de pestañas   
   $respuesta->addAssign("cuerpopestanas","innerHTML",$contenido_pestanas[$num_pestana]);
   //Pongo el estilo (de una class de css) en la pestaña pulsada
   $respuesta->addAssign("pestana" . $num_pestana, "className", "pestanaseleccionada");
   //Pongo la class css de las pestañas sin pulsar
   for ($i=0; $i<count($contenido_pestanas); $i++){
      if ($i != $num_pestana){
         $respuesta->addAssign("pestana" . $i, "className", "pestanainactiva");
      }
   }
   return $respuesta;
}

El código está comentado para una fácil comprensión. No obstante podemos decir:

• Recibo como parámetro de la función, en $num_pestana, el número de la pestaña pulsada.
• Los contenidos de las pestañas los hemos metido en un array creado en la propia función. Los contenidos son textos que me he inventado y he metido directamente en el Array, pero en realidad estos contenidos los podríamos haber generado de cualquier otra forma o seleccionarlos de una base de datos.
• Para cambiar la clase (class de CSS) de un elemento de la página tenemos que utilizar la el método addAssign(). El primer valor pasado a este método es el identificador del elemento al que queremos cambiar la class, el segundo valor "className" para decirle que queremos cambiar el nombre de la clase CSS y el tercer valor el nombre de la clase que queremos asociar a ese elemento.
• Al final se hace un bucle para cada una de las pestañas, menos la que ha sido pulsada, para cambiarles la clase a la class CSS que hemos creado para las pestañas inactivas.

Con esa función registrada mediante xajax, podemos ejecutarla como hemos visto en el HTML al principio del artículo. Para inicializar la estructura de pestañas una vez cargada la página llamaremos a esta función PHP de la siguiente manera:

<script>
window.onload = xajax_cambia_contenido(0);
</script>

Con esto, al terminarse de cargar la página se mostrarán los contenidos de la pestaña 0.

Código completo de la interfaz de pestañas

Para acabar, aquí queda el código completo de este ejercicio, que tiene muchos otros detalles que no vamos a comentar porque ya se conocieron en artículos anteriores de el presente manual.

<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

//función para cambiar el contenido de las pestañas
function cambia_contenido($num_pestana){
   //instanciamos el objeto para generar la respuesta con ajax
   $respuesta = new xajaxResponse('ISO-8859-1');
   
   $contenido_pestanas = array(
      'Esto es el cuerpo de las pestañas. Puede ser tan largo como desees, que le pondremos unas barras de desplazamiento para que no se desborde.
      <br>
      <br>
      Lo que tengo es que poner más texto para las pestañas para probar que pasa cuando el texto es grande.
      <br>
      <br>
      Estilos CSS para las pestañas. Ejemplo funcionando en el que podrás ver como se maqueta con CSS para crear un estilo para un recuadro con diversas pestañas que podrán mostrar distintos contenidos...
      <br>
      <br>
      Existe una pestaña seleccionada, que es la que muestra los contenidos que se van a ver en este momento. En el ejemplo que muestra sólo los CSS las pestañas no las hemos hecho pinchables.
      <br>
      <br>
      Gracias por tu atención y por darle al scroll hacia abajo, que siempre es interesante probarlo todo bien.
      ',
      'Quisque quam dui, cursus ut, tempus at, accumsan eu, magna. Ut commodo, tortor at ultrices rutrum.
      <br>
      <br>
      Nulla nulla consequat ipsum, aliquam aliquam felis arcu eget purus. Aenean tempus. Nam hendrerit facilisis lectus. Donec velit enim, viverra in, pharetra sed, ornare vitae, mauris.
      <br>
      <br>
      Praesent vestibulum euismod turpis. Aliquam turpis arcu, cursus sed, venenatis ut, auctor id, elit. Nunc libero. Mauris tortor. Proin eu quam sed velit convallis malesuada. Curabitur tempor sem ac mauris. Aliquam felis velit, bibendum sit amet, auctor ultricies, consequat nec, neque. Sed quis mi. Duis tincidunt odio.
      <br>
      <br>
      Etiam tincidunt pede eu elit. Pellentesque at arcu. Phasellus mi tellus, gravida ac, consectetuer sed, adipiscing nec, enim. Integer nisi lectus, scelerisque eu, dapibus vel, hendrerit eu, lacus.
      ',
      'Vestibulum ac pede vitae risus pharetra vulputate. Raesent massa diam, tempor sit amet, porttitor non, pretium eget pede.
      <br>
      <br>
      Praesent sed ipsum. Etiam suscipit lectus vitae eros. Phasellus eget pede. Nam quis ipsum. Sed vitae turpis. Sed sed ipsum vel augue dignissim tempor. Maecenas volutpat, tellus non eleifend pellentesque, eros eros ornare nibh, id egestas nunc quam quis neque. Curabitur nec justo. Vestibulum consectetuer sapien et erat.
      <br>
      <br>
      Etiam sit amet dui vitae elit facilisis gravida. Sed molestie rhoncus sem. Nulla facilisi. Suspendisse potenti.
      ');
   //coloco el texto nuevo en el cuerpo de la interfaz de pestañas   
   $respuesta->addAssign("cuerpopestanas","innerHTML",$contenido_pestanas[$num_pestana]);
   //Coloco el estilo (de una class de css) en la pestaña pulsada
   $respuesta->addAssign("pestana" . $num_pestana, "className", "pestanaseleccionada");
   //coloco la class css de las pestañas sin pulsar
   for ($i=0; $i<count($contenido_pestanas); $i++){
      if ($i != $num_pestana){
         $respuesta->addAssign("pestana" . $i, "className", "pestanainactiva");
      }
   }
   return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("cambia_contenido");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Interfaz de Pestañas Ajax y PHP</title>
<link rel="STYLESHEET" type="text/css" href="estilo-pestanas3.css">
<?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
   ?>
</head>

<body>

Sistema de navegación con diversas pestañas, programado con Ajax y PHP para traer los contenidos de cada pestaña.

<br>
<br>

<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>

<script>
window.onload = xajax_cambia_contenido(0);
</script>

</body>
</html>

Si lo deseamos, podemos ver el ejercicio en una página aparte.