Segunda-feira, 05 de outubro de 2009 às 10h30

Style Switcher com jQuery

Faça o curso: jQuery na Prática

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" />
<link rel="stylesheet" type="text/css" href="estilopreto.css" title="preto" />
<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>
<li><a href="#" rel="normal" class="styleswitch">Estilo 1</a></li>
<li><a href="#" rel="vermelho" class="styleswitch">Estilo 2</a></li>
<li><a href="#" rel="preto" class="styleswitch">Estilo 3</a></li>
</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">
/**
* 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>

Dêem uma olhada no exemplo criado. É bem simples, mas ilustra bem o que pode ser feito.

Via: WebIntenta

2 comentários

 Fernando Barbosa
05/10/2009 14h51

.

parabéns pelo tutorial. Tenho descoberto coisas novas em jquery e isso sempre dá um ânimo a mais pra estudar a biblioteca. Valeu!

 Thiago Valentim
06/10/2009 16h51

.

Muito boa a continuação....
muitos usuarios não sabem trocar a folha de estilo no proprio navegador.

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.