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:

 

220 Estilos para Photoshop

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

Los estilos de Photoshop nos pueden ser muy útiles para automatizar una serie de procesos y para acelerar el proceso de diseño. Yo los utilizo mucho para botones y barras de navegacion. En Deziner Folio nos ofrecen un paquete con 220 estilos. Una vez descargado y descomprimido, sólo tienes que abrir la ventana de estilos y pulsar en ella la flecha que se encuentra en la parte superior derecha de la ventana. Una vez hecho esto aparecerá un menú y seleccionaremos “Cargar estilos…” para seleccionar el archivo en formato .asl.

Estilos Photoshop

220 Photoshop Amazing Layer Stiles » »

Algunas entradas relacionadas:

 

56 estilos para Photoshop

2 COMENTARIOS -  Publicado hace 28 meses -  Clasificado en: , ,

56 estilos para Photoshop que nos pueden ser de utilidad a la hora de diseñar distintos elementos de interface.

Layer Styles

Algunas entradas relacionadas:

 

Estilos web 2.0 para Photoshop

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

Set de estilos para Photoshop para lograr un aire a lo web 2.0. Los estilos están incluidos dentro de un post que explica como están dibujados los logos de la web 2.0.

Web 2.0 logos

Vía Criterion » »

Algunas entradas relacionadas:

 

Estilos de plástico para Photoshop

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

Estilos Photoshop

Algunas entradas relacionadas:

 

Estilo de Photoshop para crear botones

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

Hay veces que posteo cosas que no sé si son de mucho interés, pero el caso es que a mí me sirven: ya sea como repositorio de scripts o de ficheros a los que puedo recurrir en un momento dado como es este caso. Andaba haciendo unos botones en Photoshop para una aplicación del estilo web 2.0 (mucho brillo y cosas grandes) y he decidido guardar el estilo de capa por si necesito reutilizarlo en alguna otra ocasión.

Estilos


Descargar estilo » »

NOTA: Para usarlo, lo primero que hay que hacer es cargar el estilo. Para ello abrimos el panel de estilos de Photoshop si no lo tuvieramos abierto (Ventana > Estilos). El panel tiene un pequeño triangulo, similar a un "play" que despliega un menú desde el que cargar el estilo. Una vez cargado únicamente deberemos hacer clic sobre él para aplicarlo a la capa que tengamos seleccionada.

Algunas entradas relacionadas:

 

Badges mediante estilos de Photoshop

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

En Barteleme Design existe un interesante tutorial sobre cómo crear los llamados "badges" o "chapas" en Photoshop.
- PRIMERA PARTE DEL TUTORIAL
- SEGUNDA PARTE DEL TUTORIAL

A continuación muestro una forma alternativa de hacerlas mediante estilos de capa creados y guardados en un fichero asl.

1.- Hacemos click sobre la herramienta polígono, establecemos el número de lados en 26, además de los siguientes parámetros:

y, en una capa nueva, dibujamos un polígono sin importarnos el color elegido para ello. Obtendremos un polígono similar a este:

Badge

2.- Abrimos la ventana de estilos y mediante el menu asociado a este panel elegimos la opción "Cargar Estilos..." para cargar el estilo "EstilosBadge.asl", que previamente habremos descargado desde esta web.

Estilos

3.- Aplicamos cualquiera de los cinco estilos.

Badges

Descargar Estilo: Descargar

 
Páginas: 1