Un script para cambiar el estilo CSS de la página web, usando Ajax y PHP, con las librerías Xajax.
En este artículo vamos a hacer una página web que se puede visualizar con varios estilos CSS distintos, donde el usuario puede elegir el que prefiere. Por medio de diversos enlaces, el visitante podrá seleccionar el aspecto que desea para la web, entonces se cargará una hoja de estilos CSS distinta y por lo tanto cambiará el aspecto de la página.
Este sistema lo vamos a realizar utilizando PHP y Ajax, de modo que al cambiar el estilo no se recargue la página entera, sino que se altere sin recargar los contenidos. Para simplificarnos la vida, utilizaremos el framework Xajax, cuya documentación venimos publicando en DesarrolloWeb.com en el Manual de Xajax.
Lo mejor para enterarse bien de los objetivos de este artículo es visualizar el ejemplo en una página aparte
Este ejemplo podría realizarse simplemente con Javascript, pero para los que se encuentren familiarizados con PHP será mucho más fácil utilizando Ajax, por medio de las librerías Xajax. Afortunadamente, el trabajo que vamos a tener que realizar es bien sencillo, ya que Xajax contiene una serie de funciones para incluir archivos CSS en la página, así como para eliminar declaraciones de estilos incluidas previamente.
Las funciones de Xajax que permiten incluir o quitar declaraciones de estilos pertenecen al objeto de la clase xajaxResponse, que instanciamos en las funciones PHP que se tienen que procesar por medio de Ajax.
includeCSS('nuevo_estilo.css')
El método includeCSS sirve para incluir un link con una declaración de estilos en el HEAD de la página. Recibe el archivo, o mejor dicho, la ruta del archivo CSS que se desea incluir.
removeCSS('estilo_a_quitar.css')
El método removeCSS sirve para eliminar un link a una declaración de estilos insertada anteriormente con includeCSS() de Xajax. Recibe la ruta del archivo CSS que se desea quitar.
waitForCSS()
El método waitForCSS() sirve para obligar al objeto response a esperar que finalice la carga de un CSS antes de continuar realizando acciones.
Con esas tres funciones realizamos todo el trabajo de incluir y eliminar estilos muy fácilmente, como podemos ver en el siguiente ejemplo:
El código del ejemplo es el siguiente (Podéis ir echando un vistazo y luego pondré algunas explicaciones)
<?
session_start();
if (!isset($_SESSION["estilo_css"]))
$_SESSION["estilo_css"] = "css_gris.css";
//clase ajax
require ('xajax/xajax_core/xajax.inc.php');
//instanciamos xajax
$xajax = new xajax();
function cambiar_estilos($nuevo_estilo){
$respuesta = new xajaxResponse();
$respuesta->includeCSS($nuevo_estilo);
$respuesta->waitForCSS();
$respuesta->removeCSS($_SESSION["estilo_css"]);
$_SESSION["estilo_css"] = $nuevo_estilo;
return $respuesta;
}
$xajax->register(XAJAX_FUNCTION, 'cambiar_estilos');
//procesar peticiones
$xajax->processRequest();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cambiar hoja de estilos</title>
<link rel="STYLESHEET" type="text/css" href="<?echo $_SESSION["estilo_css"];?>">
<?
//librerías xajax javascript
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<h1>Página que cambia los estilos</h1>
<a href="javascript: void(xajax_cambiar_estilos('css_gris.css'))">Estilo gris</a> |
<a href="javascript: void(xajax_cambiar_estilos('css_verde.css'))">Estilo verde</a> |
<a href="javascript: void(xajax_cambiar_estilos('css_rojo.css'))">Estilo rojo</a>
</body>
</html>
En el script hemos realizado en un primer paso en el que se inicializa la sesión PHP y se genera una variable de sesión con el estilo del usuario, si es que no existía ya.
Luego incluimos las librerías Xajax y generamos el objeto de la clase Xajax.
Luego definimos una función, cambiar_estilos($nuevo_estilo), que es donde realizamos el trabajo con Xajax para alterar los estilos de la página. Esta función recibe el nombre del archivo CSS que se debe incluir y realiza los siguientes pasos:
Lo primero que hace es crear un objeto de la clase xajaxResponse. El siguiente paso es incluir el archivo CSS con la función mencionada anteriormente en este artículo de desarrollo web .com, includeCSS($nuevo_estilo), que depende del objeto xajaxResponse. Más tarde, con waitForCSS() obligamos a esperar que se haya cargado el nuevo archivo CSS. Por último eliminamos el archivo CSS anterior con removeCSS(), indicando como parámetro el nombre de la declaración de estilos que teníamos en la variable de sesión, y actualizamos la variable de sesión para recordar el estilo actual que ha seleccionado el usuario.
Las demás tareas del código de la página ya las debemos conocer si hemos seguido el manual de programación Ajax con PHP. Sólo cabe señalar que los tres enlaces de abajo tienen las distintas llamadas a la función Xajax, enviando como parámetro el nombre del archivo de estilos que se desea visualizar.
Una prueba que podemos hacer es cambiar el estilo varias veces y luego actualizar la página con F5. Veremos que la página memoriza el último estilo que se había seleccionado, ya que se guardó en una variable de sesión.
Por último, dejamos de nuevo el enlace para ver el ejemplo en marcha.
Este sistema lo vamos a realizar utilizando PHP y Ajax, de modo que al cambiar el estilo no se recargue la página entera, sino que se altere sin recargar los contenidos. Para simplificarnos la vida, utilizaremos el framework Xajax, cuya documentación venimos publicando en DesarrolloWeb.com en el Manual de Xajax.
Lo mejor para enterarse bien de los objetivos de este artículo es visualizar el ejemplo en una página aparte
Este ejemplo podría realizarse simplemente con Javascript, pero para los que se encuentren familiarizados con PHP será mucho más fácil utilizando Ajax, por medio de las librerías Xajax. Afortunadamente, el trabajo que vamos a tener que realizar es bien sencillo, ya que Xajax contiene una serie de funciones para incluir archivos CSS en la página, así como para eliminar declaraciones de estilos incluidas previamente.
Las funciones de Xajax que permiten incluir o quitar declaraciones de estilos pertenecen al objeto de la clase xajaxResponse, que instanciamos en las funciones PHP que se tienen que procesar por medio de Ajax.
includeCSS('nuevo_estilo.css')
El método includeCSS sirve para incluir un link con una declaración de estilos en el HEAD de la página. Recibe el archivo, o mejor dicho, la ruta del archivo CSS que se desea incluir.
removeCSS('estilo_a_quitar.css')
El método removeCSS sirve para eliminar un link a una declaración de estilos insertada anteriormente con includeCSS() de Xajax. Recibe la ruta del archivo CSS que se desea quitar.
waitForCSS()
El método waitForCSS() sirve para obligar al objeto response a esperar que finalice la carga de un CSS antes de continuar realizando acciones.
Con esas tres funciones realizamos todo el trabajo de incluir y eliminar estilos muy fácilmente, como podemos ver en el siguiente ejemplo:
Nota:Este ejemplo se ha realizado con Xajax versión 0.5. Recordar que en el
manual de Xajax
explicamos diversas claves para entender el código siguiente código y que vamos a dar por entendidas en este artículo.
El código del ejemplo es el siguiente (Podéis ir echando un vistazo y luego pondré algunas explicaciones)
<?
session_start();
if (!isset($_SESSION["estilo_css"]))
$_SESSION["estilo_css"] = "css_gris.css";
//clase ajax
require ('xajax/xajax_core/xajax.inc.php');
//instanciamos xajax
$xajax = new xajax();
function cambiar_estilos($nuevo_estilo){
$respuesta = new xajaxResponse();
$respuesta->includeCSS($nuevo_estilo);
$respuesta->waitForCSS();
$respuesta->removeCSS($_SESSION["estilo_css"]);
$_SESSION["estilo_css"] = $nuevo_estilo;
return $respuesta;
}
$xajax->register(XAJAX_FUNCTION, 'cambiar_estilos');
//procesar peticiones
$xajax->processRequest();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Cambiar hoja de estilos</title>
<link rel="STYLESHEET" type="text/css" href="<?echo $_SESSION["estilo_css"];?>">
<?
//librerías xajax javascript
$xajax->printJavascript("xajax/");
?>
</head>
<body>
<h1>Página que cambia los estilos</h1>
<a href="javascript: void(xajax_cambiar_estilos('css_gris.css'))">Estilo gris</a> |
<a href="javascript: void(xajax_cambiar_estilos('css_verde.css'))">Estilo verde</a> |
<a href="javascript: void(xajax_cambiar_estilos('css_rojo.css'))">Estilo rojo</a>
</body>
</html>
Nota:En nuestro script utilizamos variables de sesión para recordar el estilo que ha seleccionado el usuario, de modo que se pueda mostrar la página siempre con ese estilo durante toda la sesión o visita del usuario al sitio web. Si deseásemos que el sitio recordase el estilo seleccionado en las diferentes visitas del usuario, aunque estas estuvieran muy espaciadas en el tiempo, podríamos utilizar Cookies con PHP. Ese artículo de desarrolloweb nos ilustrará bastante, pero si queremos, también podemos
ver un ejemplo de uso de Cookies para almacenar el estilo CSS
con el que se debe ver una página web.
En el script hemos realizado en un primer paso en el que se inicializa la sesión PHP y se genera una variable de sesión con el estilo del usuario, si es que no existía ya.
Luego incluimos las librerías Xajax y generamos el objeto de la clase Xajax.
Luego definimos una función, cambiar_estilos($nuevo_estilo), que es donde realizamos el trabajo con Xajax para alterar los estilos de la página. Esta función recibe el nombre del archivo CSS que se debe incluir y realiza los siguientes pasos:
Lo primero que hace es crear un objeto de la clase xajaxResponse. El siguiente paso es incluir el archivo CSS con la función mencionada anteriormente en este artículo de desarrollo web .com, includeCSS($nuevo_estilo), que depende del objeto xajaxResponse. Más tarde, con waitForCSS() obligamos a esperar que se haya cargado el nuevo archivo CSS. Por último eliminamos el archivo CSS anterior con removeCSS(), indicando como parámetro el nombre de la declaración de estilos que teníamos en la variable de sesión, y actualizamos la variable de sesión para recordar el estilo actual que ha seleccionado el usuario.
Las demás tareas del código de la página ya las debemos conocer si hemos seguido el manual de programación Ajax con PHP. Sólo cabe señalar que los tres enlaces de abajo tienen las distintas llamadas a la función Xajax, enviando como parámetro el nombre del archivo de estilos que se desea visualizar.
Una prueba que podemos hacer es cambiar el estilo varias veces y luego actualizar la página con F5. Veremos que la página memoriza el último estilo que se había seleccionado, ya que se guardó en una variable de sesión.
Por último, dejamos de nuevo el enlace para ver el ejemplo en marcha.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...