> Manuales > Trabajo con Ajax en PHP utilizando Xajax

Presento una bonita simbiosis entre Xajax y NiftyCube, para lograr un menú de pestañas que se activan del lado del cliente, con una apariencia redondeada sin usar imágenes.

Este ejemplo comienza con la adaptación del menú de pestañas que está publicado aquí:
http://www.desarrolloweb.com/articulos/ejemplos/ajax/xajax/pestanas.php
y que está realizado en xajax 0.2

Lo primero es transformar el código de xajax 0.2 a 0.5, para lo cual ya está dicho aquí:
http://www.desarrolloweb.com/articulos/actualizar-xajax-0-2-a-xajax-0-5.html

pero debemos de incluir algunas salvedades:

1- Cambiar "=&" por "=" en las líneas 360 y 1305 del archivo xajax.inc.php .
Xajax 0.5 está escrito para ser usado con alguna versión 4.x de PHP. Si trabajas con 5.x has de realizar dichos cambios. En caso contrario aparecerán errores como este:
Deprecated: Assigning the return value of new by reference is deprecated in C:wampwwwxajaxxajax_corexajax.inc.php on line 360
Deprecated: Assigning the return value of new by reference is deprecated in C:wampwwwxajaxxajax_corexajax.inc.php on line 1305

2. Para incluir caracteres latinos, se usan en la versión 0.5 de Xajax estas sentencias:

$xajax->setCharEncoding('ISO-8859-1');
$xajax->setFlag("decodeUTF8Input",true);

Pero aún asi, si no te funciona (si las Ñ y los acentos se te ven mal) usa en su lugar esta sentencia:

header("Content-Type:text/html;charset:ISO-8859-1;");

que es una sentencia válida en PHP.
Hecho esto, el código de navegación por pestañas queda así:

<?php
//incluímos la clase ajax
require ('xajax/xajax_core/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
header("Content-Type:text/html;charset:ISO-8859-1;"); //en caso no funcione las dos siguientes sentencias, lo cual ya me ha ocurrido
//$xajax->setCharEncoding('ISO-8859-1');
//$xajax->setFlag("decodeUTF8Input",true);

//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();
      $contenido_pestanas = array(
      'Los Planetas orbitan normalmente a una estrellas, nuestra estrella es el Sol. En la actualidad ya se han descubierto cientos de planetas orbitando otras estrellas, pero son tan pequeños y poco luminosos, que todavía no podemos verlos. Aún así, por otros medios, se calculan los tamaños y son varias las "hermanas Tierras" las que se han descubierto, o por lo menos se parecerán a laTierra mucho más que Júpiter o Mercurio.
      <br>
      <br>
      La Galaxia Vía Láctea está formada por miles de millones de estrellas, y en el Universo conocemos miles de millones de galaxias... no me preguntes, el número de estrellas de Universo (las que se cree que existen) es muy muy grande... tan grande como puede ser la complejidad de un ser vivo, como tú y como yo, o como una sencilla hormiga.
      <br>
      <br>
      Si algún día pudiéramos viajar fuera del Sistema Solar, iremos probablemente a Alpha Centauri... ¿te suena? es la estrella más cercana... son tres compañeras, mientras que el Sol es una estrella solitaria. Aún así, siendo la más cercana, la luz necesita ni más ni menos que 4 años en llegar hasta nosotros... lo cual quiere decir, que cuando vemos esa estrella, su luz abandonó el astro hace 4 años... no la vemos como "es" ahora, sino como fue.         
      <br>
      <br>
      Gracias por tu atención y por darle al scroll hacia abajo, que siempre es interesante probarlo todo bien.
      ',
      '<i>No hay oscuridad sino falta de luz.</i>
      <br>
      <br>
      La luz nunca se detiene, bajo ninguna referencia. Tu ahora estás sentado en tu mesa, leyendo esto, por lo tanto, ante tu casa, tu mesa, estas detenido, con velocidad Cero. Pero si alguien mira desde el espacio ve que te mueves con la Tierra. La luz NO, ante nada está en reposo, y siempre tiene la misma velocidad cuando viaja por el vacío, ante cualquier sistema de referencia que lo mida.... La Luz, es La Luz
      <br>
      <br>
      <br>
      Si miramos a la galaxia más cercana, Andrómeda, esta se encuentra un millón de veces que la estrellas más cercana, a 2 Millones de años luz... cuando salió la luz que vemos hoy, en la Tierra habitaban los homínidos...
      <br>
      <br>
      Si ya sabes lo que tienes que hacer y no lo haces entonces estás peor que antes.<br>Confucio
      ',
      'Todo acto forzoso se vuelve desagradable. <bR>Aristóteles.
      <br>
      <br>
      En un estado verdaderamente libre, el pensamiento y la palabra deben ser libres.<br>Suetonio (69-140) Historiador y biógrafo romano
      <br>
      <br>
      Pues nada más, la vida es el mejor escenario donde probarnos, aprender, evolucionar, y Ser Felices!!!!
      ');
      
      
      //coloco el texto nuevo en el cuerpo de la interfaz de pestañas
      $respuesta->assign("box","innerHTML",$contenido_pestanas[$num_pestana]);
      
      //Coloco el estilo (de una class de css) en la pestaña pulsada
      $respuesta->assign("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->assign("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->processRequest();
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navegación con Pestañas con Esquinas Redondeadas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="HAPedit 3.1">

<link rel="STYLESHEET" type="text/css" href="estilo-pestanas3.css"> <!-- he separado los estilos en un archivo diferente -->

<?php $xajax->printJavascript("xajax/"); //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario ?>
</head>
<body>
<div id="menu">
   <h3>Pestañas con Esquinas Redondeadas: Xajax + NiftyCube</h3><br>
<ul id="nav">
<li id="pestana0"><a href="javascript:void(xajax_cambia_contenido(0))">Intereses</a></li>
<li id="pestana1"><a href="javascript:void(xajax_cambia_contenido(1))">Portfolio</a></li>
<li id="pestana2"><a href="javascript:void(xajax_cambia_contenido(2))">Contacto</a></li>
</ul>
<div id="box" class="box"></div>
</div>

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

Ver mas info en la página actual de xajax: http://www.xajax-project.org/

Ahora vamos a realizar el redondeado de las esquinas, para lo cual usaremos la última versión de Nifty Corner Cube: http://www.html.it/articoli/niftycube/index.html en particular, vamos a usar el ejemplo 4-bis el cual como todos los demás, vienen incluidos en la descarga.

Comenzamos incluyendo en el header los arhivos que vamos a necesitar de NiftyCube, que son una hoja de estilos y un script Javascript.

<link rel="stylesheet" type="text/css" href="../niftycube/niftyCorners.css">
<script type="text/javascript" src="../niftycube/niftycube.js"></script>

Ya tenemos la mitad hecho. Lo último por hacer es ejecutar un sencillo script cuando la página termine de cargarse, y eso lo hacemos con window.onload. Como ya tenemos nuestra funcion de xajax también corriéndola por este procedimiento, vamos a eliminarla y a incluirla en este script:

<script>      
   window.onload=function()
   {
      Nifty("ul#nav a","top");          
      xajax_cambia_contenido(0);
   }
</script>

de tal forma que se ejecutarán los dos scripts al terminar de cargar la página, con lo que tendremos nuestras pestañas funcionando y con las esquinas redondeadas.
Finalmente copio el código de la hoja de estilos estilo-pestanas3.css

@charset "utf-8";
/* CSS Document */

html,body{margin:0;padding:0}
body{background: #002455; font-family: Verdana, Geneva, sans-serif; font-size:13px;}
div#menu{float:left;width: 100%;padding-top:50px; padding-left:30px;background: #002455}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left: 60px}
ul#nav li{float:left;margin-right: 3px;text-align: center}
ul#nav a{float:left;width: 8em;padding: 6px 0;text-decoration:none;color: #222}
ul#nav li.pestanainactiva a{background:#CCC}
ul#nav li.pestanainactiva a:hover{color: #FF6;}
ul#nav li.pestanaseleccionada a{background:#FFF;font-weight:bold}
div#box{   
   background-color: #FFFFFF;
   clear:both;
   margin:0px;
   padding:10px;
   height: 300px;
   overflow: auto;
   width:420px
}

h1,h2,h3{font: lighter 200% "Trebuchet MS",Arial sans-serif;color: #208BE1}

Raúl Martínez Morales

Manual