As CSS (Cascading Style Sheets) proporciona ao designer um enorme controle sobre a forma de apresentação do website.
Aproveitando-se dessa funcionalidade e utilizando o framework javascript jQuery, iremos implementar um alternador
dinâmico de estilos da página. Nele o usuário pode escolher qual será o seu tema padrão e assim ele permanecerá como
default do website por 365 dias (ou enquanto o usuário não excluir os cookies do seu navegador).
Iniciando
O primeiro passo é fazer o link dos arquivos .js no head da página. São eles:
<script src="js/jquery-1.2.6.min.js" type="text/JavaScript"></script>
<script src="js/manipulation.js" type="text/JavaScript"></script>
Acima fizemos o link relativo no diretório /js da última versão do framework jQuery “jquery-1.2.6.min.js”, e do
arquivo que utilizaremos para aplicar as funções dos eventos de click do alternador de estilos, no caso foi dado o
nome “manipulation.js” mas você pode nomeá-lo como quiser.
Segundo Passo:
Utilizaremos para este exemplo 4 CSS diferentes, sendo cada 1 deles um tema diferente para o website. Faremos
assim como com os arquivos javascript o seu link no head da página:
<link href="css/style1.css" rel="stylesheet" type="text/css" media="all" title="styles1" />
<link href="css/style2.css" rel="alternate stylesheet" type="text/css" media="all" title="styles2" />
<link href="css/style3.css" rel="alternate stylesheet" type="text/css" media="all" title="styles3" />
<link href="css/style4.css" rel="alternate stylesheet" type="text/css" media="all" title="styles4" />
Observe que a única diferença entre os 4 arquivos é o atributo “rel=” (relacional) e o título deles. Nele dizemos
qual será o CSS padrão (rel=”stylesheet”) e quais serão os CSS alternativos (rel=”alternate stylesheet”), dando também
um título diferente à cada um deles.
Marcação XHTML:
Faremos como botões para ativar os estilos uma lista não ordenada utilizando ul e li:
<ul>
<li><a href="#" title="Tema Padrão - Verde" id="styles1" rel="styles1" class="styleswitch">styles1</a></li>
<li><a href="#" title="Mudar o tema para Laranja" id="styles2" rel="styles2" class="styleswitch">styles2</a></li>
<li><a href="#" title="Mudar o tema para Azul" id="styles3" rel="styles3" class="styleswitch">styles3</a></li>
<li><a href="#" title="Mudar o tema para Cinza" id="styles4" rel="styles4" class="styleswitch">styles4</a></li>
</ul>
Assim como com os links no head daremos a eles um id (id=”styles1″,..2..3,..4), um rel (rel=”styles1″,..2..3,..4) e uma classe única para
os 4 elementos a(âncora) do html, pois será com ela que localizaremos pela função do jQuery os links.
Arquivo de funções/manipulação jQuery
Fazemos a captura de todos os elementos com o atributo relacional (rel=”styles1,..2,..3,..4″) e gravamos
um cookie com o seu respectivo nome, logo em seguida faz-se a leitura do cookie passando como atributo para
a função switchStylestyle(styleName) que faz a troca do tema default do seu navegador.
Segue seu código abaixo:
$(document).ready(function(){
$('.styleswitch').click(function(){
switchStylestyle(this.getAttribute("rel"));
return false;
});
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;
}
var c = readCookie('style');
if (c) {
switchStylestyle(c);
}
else {
$("#styles1").addClass("styles1-selected");
}
function switchStylestyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i) {
this.disabled = true;
document.selectedStyleSheetSet = styleName;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
for(var i=1;i<=4;i++){
$("#styles"+i).removeClass("styles" + i + "-selected");
}
$("#"+styleName).addClass(styleName + "-selected");
}
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 eraseCookie(name){
createCookie(name,"",-1);
}
});
Acredito que todos os elementos necessários para a aplicação do tema foram mencionados acima,
ficando a critério de cada um o CSS para a apresentação no site dos botões de troca de temas.
Caso alguém tenha problema(s) na implementação poste nos comentários.
Até o próximo, obrigado.
