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

via Kabytes by Pablo on 4/7/10


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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: