Cambiar hoja de estilo (CSS) con jQuery sin recargar el sitio

Con jQuery podemos hacer prácticamente cualquier cosa, en mi caso todavía sigo aprendiendo como usar este fantástico framework. Hoy por ejemplo, y gracias a Delicious, llego a jQuery Style Switcher Toggle.

Con este plugin para jQuery y como su nombre indica vamos a poder cambiar de hoja de estilo en vivo y en directo, sin la necesidad de tener que recargar el documento para tener que ver como afectan las distintas propiedades a nuestros elementos.

Esto es un efecto divertido para aquellos sitios o aplicaciones web que le permiten al usuario seleccionar distintos temas. Con este plugin se puede ver perfectamente las ventajas de separar la parte visual de un sitio de su código funcional.

Ejemplo de como funciona este Switcher de estilos:

$(function()
	{
		// Call stylesheet init so that all stylesheet changing functions
		// will work.
		$.stylesheetInit();

		// This code loops through the stylesheets when you click the link with
		// an ID of "toggler" below.
		$('#toggler').bind(
			'click',
			function(e)
			{
				$.stylesheetToggle();
				return false;
			}
		);

		// When one of the styleswitch links is clicked then switch the stylesheet to
		// the one matching the value of that links rel attribute.
		$('.styleswitch').bind(
			'click',
			function(e)
			{
				$.stylesheetSwitch(this.getAttribute('rel'));
				return false;
			}
		);
	}
);

Nada complicado y una implementación muy sencilla y limpia. Pueden ver una demo directamente desde el sitio del plugin.

Categorizado en: