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

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.

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

- Editar y Borrar datos en MySQL con PHP
- Como generar un Thumbnail en PHP usando GD
- Conectarse a cualquier tipo de gestor de base de datos gracias a ADOdb con PHP
- Encuesta con PHP
- Cookies con PHP

- Versión imprimible de este documento
- Enviar por e-mail este documento