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.
Buen ejemplo, ahora estoy trabajando en algo similar, va la explicación. Tengo un formulario, antes de submit, verifico la validez de los datos (expresiones regulares, campos requeridos, etc.), esto apoyado con algunas funciones y jQuery. Ahora, cuando un campo no es válido (mal regex, vacío un campo requerido, etc.), quiero resaltar el campo o los campos del formularios en los que existe un error, para esto utilizo jQuery para hacer lo siguiente:
$(element).addClass (“jSFError”);
Es decir, al elemento (o campo), le agrego la clase “jSFError”, la cual está definida en un archivo style.css.
Efectivamente se agrega el atributo a class, pero en mi página html no se refleja este cambio.
Conoces, o alguien más conoce, ¿qué método o evento debo ejecutar para que el cambio se vea reflejado?
Espero me puedan ayudar. Saludos,
JRivera
muy bueno
los resultados son muy bueno pero mi duda es que a la hora de hacer el diseño en el dreamweaver pierde todo el formato que tiene … o es q hice algo mal pero he seguido todos los pasos.
Agradesco un respuesta ……….. Hasta luego
y algo mas porq en el mozilla y en opera la primera pagina (index.php) no carga su estilo muestra todo como si no tubiese uno pero al hacer clic en uno de los links de los estilos funciona normalmente.
La pregunta es: ¿Como establesco un estilo predeterminado para q se pueda mostrar al cargar la pagina?
Gracias
Hola leo, el problema cuando carga por primera vez la pagina index.php y no muestra ningun estilo es porque si te fijas en la parte donde verifica si existe la cookie que guarda el tema (estilo), declara como estilo por defecto “none.css”, luego para tu caso puedes crear el estilo default y llamarlo default.css, entonces tendras que cambiar en esta parte:
if(!empty($_COOKIE[‘_theme’])) $style = $_COOKIE[‘_theme’];
else $style = “default”;
saludos
muy buen ejemplo para poder cambiar de css me parece que la tecnologia jquery esta trendo muchas novedades .
Hola. Me gusta mucho este style switcher, pero por alguna razon en internet explorer los valores de los cookies se vuelven locos.
Si guarda los cookies, pero aplica el color que kiere cuando se refresca la pagina.
Es algo extraño. Yo se que ustedes pueden tener una solucion. Gracias
Muy bueno el articulo!!
En cuanto al problema que presenta la cookie en internet explorer se corrige editando
setcookie(‘_theme’,$tema,time()+(86400*365),”/”,””);
por
setcookie(‘_theme’,$tema,time()+60*60*24*30,”/”,”tusitio.com “);
a mi me funciono.