Style Switcher con jQuery

1 COMENTARIO -  Publicado hace 12 meses -  Clasificado en: , , , ,

En Kelvinluck.com me he encontrado con una muy sencilla forma de hacer un style swither (o intercambiador de estilos) aprovechando la potencia de selección de jQuery. El ejemplo también utiliza cookies con lo que el estilo elegido por el visitante es almacenado para mostrarselo por defecto la próxima vez que visita la página.

La aplicación del ejemplo es muy sencilla. Primero incluimos el fichero de jQuery. 

<script type="text/javascript" src="jquery-1.2.6.js"></script>

Incluimos tanto el estilo que se mostrará la primera vez que el visitante acceda a la página como los estilos alternativos que deseemos. 

<link rel="stylesheet" type="text/css" href="Estilos.css" title="Normal" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloRojo.css" title="Rojo" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloNegro.css" title="Negro" media="screen" />

Lo importante es asignarle un atributo "title" con un nombre que posteriormente utilizaremos para identificarlo.

Lo siguiente es crear los enlaces, que deben tener la clase "styleswitch" y el atributo "rel" con el nombre que aparece en el "title" del estilo al que vamos a pasar. 

<ul>
<li><a href="Ejemplo.html" rel="Normal" class="styleswitch">Estilo 1</a></li>
<li><a href="Ejemplo.html" rel="Rojo" class="styleswitch">Estilo 2</a></li>
<li><a href="Ejemplo.html" rel="Negro" class="styleswitch">Estilo 3</a></li>
</ul>

Ahora tan sólo queda incluir el script de Kelvinluck.com, que se ayuda de un par de funciones de Quirksmode. 

<script language="javascript">
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($){
$(document).ready(function() {
	$('.styleswitch').click(function()
	{
		switchStylestyle(this.getAttribute("rel"));
		return false;
	});
	var c = readCookie('style');
	if (c) switchStylestyle(c);
});
function switchStylestyle(styleName) {
	$('link[@rel*=style][title]').each(function(i) 
	{
		this.disabled = true;
		if (this.getAttribute('title') == styleName) this.disabled = false;
	});
	createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days){
	if (days)	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name){
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name){
	createCookie(name,"",-1);
}
// /cookie functions
</script>

Ya tenemos realizado un intercambiador de estilos que recordará nuestra elección cada vez que carguemos la página.

Ver Ejemplo en funcionamiento » »

Algunas entradas relacionadas:

 

CS Lite: Manejo de cookies con Firefox

0 COMENTARIOS -  Publicado hace 23 meses -  Clasificado en: , ,

Las cookies, en bastantes casos, son usadas para monitorizar nuestra actividad en internet. Una buena práctica es bloquear las cookies de aquellos sitios web donde no necesitemos estar autentificados. CS Lite es una extensión de Firefox que nos puede ser de gran ayuda a la hora de realizar un contrl de cookies. Tras instalarse añade un icono en la barra de estado, para acceder a sus características, pudiendo permitir cookies de una página, permitirlas temporalmente o bloquearlas. Uno de los aspectos más interesantes es que dispone de una lista negra de sitios, descargable y actualizable desde internet. Esta lista contiene cientos de sitios que utilizan las cookies para monitorizar la actividad de sus visitantes.
En el aspecto del desarrollo web, también dispone la posibilidad de ver y editar las cookies. Interesante si en nuestro desarrollo pensamos hacer uso de ellas.

CS Lite » »

 

CookieCuller: mejor gestión de tus cookies con Firefox

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

CookieCuller es una extensión de Firefox que nos ayuda a gestionar nuestras cookies. Más concretamente, CookieCuller permite proteger algunas cookies, por ejemplo para no ser desconectado de tu webmail cada vez que cerramos el navegador, mientras borra otras automáticamente.

CookieCuller » »

Algunas entradas relacionadas:

 
Páginas: 1