Anteriormente habiamos explicado una forma sencilla de cambiar la hoja de estilo de una página web dinamicamente con PHP. En esta oportunidad vamos agregarle la funcionalidad que proporciona AJAX, es decir de realizar una tarea en la web sin necesidad de recargar la página actual. Para cumplir esto nos ayudaremos de la librería jQuery (de la cual actualmente no me despego para nada). Lo que haremos es agregar-modificar algunos fragmentos del código de nuestro anterior ejemplo. Aún así explicaremos el código sin necesidad de conocimiento del anterior artículo. Manos a la obra!
Lo que queremos lograr es darle al usuario la opción de elegir entre una serie de estilos que adornen su página web. Queremos que una vez elegido su estilo, el navegador recuerde su elección para futuras visitas (haciendo uso de cookies). Pero eso no es todo, queremos lograr todo lo anterior sin necesidad de recargar la página web, es decir de una forma asíncrona.
Nuestro archivo index.php tendrá el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change Styte CSS with PHP & jQuery</title>
<?php
if(!empty($_COOKIE['_theme'])) $style = $_COOKIE['_theme'];
else $style = "none";
?>
<link id="hoja_estilo" rel="stylesheet" href="<?php echo $style ?>.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.functions.js"></script>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<div id="estilos">
<a id="style" href="theme.php?thm=style">Estilo 1</a>
<a id="style1" href="theme.php?thm=style1">Estilo 2</a>
<a id="style2" href="theme.php?thm=style2">Estilo 3</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis viverra sapien. Sed sapien ligula, scelerisque nec, blandit nec, elementum at, nulla. Pellentesque ligula mauris, fermentum eu, fermentum eu, fringilla consequat, enim. Curabitur metus tortor, semper a, eleifend et, volutpat eu, sem. Donec ante nulla, tempus accumsan, tempus in, lobortis a, lectus. Vestibulum tristique, purus quis porta pulvinar, urna ligula imperdiet est, quis molestie ipsum mauris vel neque. Nulla posuere purus id neque. Mauris libero nulla, hendrerit a, consectetur ut, porttitor eu, augue. Donec aliquam rhoncus urna. Fusce facilisis porta odio. In ac nisi non arcu dapibus scelerisque. Vestibulum a nibh. Vestibulum vitae ligula. Etiam id mi. Duis a risus sed elit blandit scelerisque. Duis enim. Pellentesque sodales. Fusce quis ipsum.</p>
<p>Suspendisse neque tellus, malesuada in, facilisis et, adipiscing sit amet, risus. Sed egestas. Quisque mauris. Duis id ligula. Nunc quis tortor. In hendrerit, quam vitae mattis interdum, turpis augue viverra justo, sed semper sem lorem sed ligula. Curabitur id urna nec risus volutpat ultrices. Aliquam nec sem. Etiam eu diam. Aenean turpis enim.</p>
</body>
</html>
Explicación:
- Empezamos verificando la existencia de la variable cookie _theme, la cual contiene el nombre de la hoja de estilo. Si existe la usaremos en la variable $style, caso contrario, por defecto, será none.
- En la etiqueta </link> donde hacemos referencia para llamar la hoja de estilos, establecemos su identificador (id) a hoja_estilo, es importante tener en cuenta esto.
- Incluimos los archivos JavaScript necesarios.
- Dentro del contenedor </div> con identificador estilos, agregamos los links a los diversos estilos que deseemos. Cada etiqueta </a> tiene un identificador relacionado con el nombre de la hoja de estilos que llamará mediante el archivo theme.php.
El archivo theme.php contiene lo siguiente:
<?php
$tema=$_GET['thm'];
setcookie('_theme',$tema,time()+(86400*365),"/","");
if(isset($_GET['async'])) {
echo $tema;
}else{
header("Location: ".$_SERVER['HTTP_REFERER']);
}
?>
Explicación:
- Tomamos el valor de la variable GET thm.
- Creamos una cookie llamada _theme en el navegador con el valor de thm.
- Verificamos la existencia de una segunda variable GET llamada async (esta variable se declara en el archivo jquery.functions.js). Si existe imprimimos el valor de thm, caso contrario volvemos a la página que nos llamó: index.php. (Es importante establecer esto, ya que si en el navegador se ha desactivado JavaScript, el script funcionará de los más normal).
El archivo puente JavaScript que hará toda la magia jquery.functions.js contiene el siguiente código:
$(document).ready(function(){
// click en cualquier link </a> del contenedor #estilos
$("#estilos a").click(function(){
CargarCSS(this);
return false;
});
function CargarCSS( CSSelegido ) {
// obtener contenido del link </a>
// la variable async servira para identificar contenido asyncrono
$.get( CSSelegido.href+'&async',function(data){
// cambiarmos atributo href del elemento hoja_estilo, obtenido de theme.php
$('#hoja_estilo').attr('href', data + '.css');
});
}
});
Explicación:
- Si se hace clic en algunos link del contenedor estilos (de la página index.php), entonces ejecuta la función CargarCSS cuyo parámetro es el objeto </a>.
- La función CargarCSS obtiene el "contenido" de la url del objeto </a> (es una llamada asíncrona). Nota: la url está compuesta de la url actual (por ej. theme.php?thm=style2) del objeto </a> más ‘&async‘.
- El valor obtenido es el nombre del estilo que usaremos. Esto se recibe en el segundo parámetro de la función, la variable data contiene este valor.
- Finalmente cambiamos el atributo href de la etiqueta </link>, identificada como hoja_estilo, con la url de la hoja de estilo elegida.
El formato de los diferentes estilos es el siguiente:
h1{
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000066;
}
p{
font-size:12px;
font-family:Arial
, Helvetica, sans-serif;
color:#666666;
}
a{
background:#006699;
color:#FFFFFF;
padding:5px;
}
Puedes ver una demo en acción ó descargar su código fuente para que lo pruebes por ti mismo.