Style Switcher com jQuery
A jQuery proporciona uma forma muito simples de você desenvolver
Style Switchers (troca de folhas de estilo) em seu site sem ter que
digitar várias linhas de código. O exemplo que vou mostrar aqui ainda
faz o uso de Cookies para que aquele CSS escolhido pelo usuário possa
ser carregado novamente quando ele voltar à página.
Primeiramente você deve fazer o uso da biblioteca jQuery,
e após criar suas folhas de estilo como desejar. Nesse exemplo vou
utilizar 3 arquivos CSS que somente irão efetuar uma alteração na cor
de fundo do layout, mas você pode defini-las como quiser.
<link rel="stylesheet" type="text/css" href="estilos.css" title="normal" /><br /><link rel="stylesheet" type="text/css" href="estilopreto.css" title="preto" /><br /><link rel="stylesheet" type="text/css" href="estilovermelho.css" title="vermelho" />É muito importante você definir um título para suas folhas de estilo,
pois futuramente iremos chamá-las no JavaScript através do title das
mesmas. O passo seguinte é o nosso HTML:
<ul><br /> <li><a href="#" rel="normal" class="styleswitch">Estilo 1</a></li><br /> <li><a href="#" rel="vermelho" class="styleswitch">Estilo 2</a></li><br /> <li><a href="#" rel="preto" class="styleswitch">Estilo 3</a></li><br /></ul>Lembram-se dos titles que definimos aos nossos arquivos CSS? Agora
eles devem ser adicionados ao atributo rel dos links referente ao
estilo em questão, juntamente com a class “styleswitch”. Depois, o
responsável por efetuar a troca é o JavaScript:
<script type="text/javascript"><br />/**<br />* Styleswitch stylesheet switcher built on jQuery<br />* Under an Attribution, Share Alike License<br />* By Kelvin Luck ( http://www.kelvinluck.com/ )<br />**/<br />(function($){<br />$(document).ready(function() {<br /> $('.styleswitch').click(function()<br /> {<br /> switchStylestyle(this.getAttribute("rel"));<br /> return false;<br /> });<br /> var c = readCookie('style');<br /> if (c) switchStylestyle(c);<br />});<br /><br />function switchStylestyle(styleName) {<br /> $('link[rel*=style][title]').each(function(i)<br /> {<br /> this.disabled = true;<br /> if (this.getAttribute('title') == styleName) this.disabled = false;<br /> });<br /> createCookie('style', styleName, 365);<br />}<br />})(jQuery);<br /><br />// cookie functions http://www.quirksmode.org/js/cookies.html<br />function createCookie(name,value,days){<br /> if (days) {<br /> var date = new Date();<br /> date.setTime(date.getTime()+(days*24*60*60*1000));<br /> var expires = "; expires="+date.toGMTString();<br /> }<br /> else var expires = "";<br /> document.cookie = name+"="+value+expires+"; path=/";<br />}<br />function readCookie(name){<br /> var nameEQ = name + "=";<br /> var ca = document.cookie.split(';');<br /> for(var i=0;i < ca.length;i++)<br /> {<br /> var c = ca[i];<br /> while (c.charAt(0)==' ') c = c.substring(1,c.length);<br /> if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);<br /> }<br /> return null;<br />}<br />function eraseCookie(name){<br /> createCookie(name,"",-1);<br />}<br />// /cookie functions<br /></script>Dêem uma olhada no exemplo criado. É bem simples, mas ilustra bem o que pode ser feito.
Via: WebIntenta
é desenvolvedor Front-end desde 2005, viciado em XHTML e CSS. Atualmente trabalha em uma agência web, a Ambulance (www.ambulance.com.br) como desenvolvedor front-end. É criador do blog Pinceladas da Web e do CSS no Lanche, voltado para o mundo do desenvolvimento Front-End.
