Web Design Curitiba | Web Designer | Websites | Sistemas Web | Portfólio - Portfólio | Designer | XHTML | CSS | Tableless | Web Standards

Se você trabalha com os softwares da adobe já sacou que essas almofadas tem a forma dos ícones de alguns dos principais softwares da empresa.

jQuery é uma poderosa biblioteca JavaScript criada para simplificar a criação de efeitos visuais e de interatividade em web sites. Desenvolvedores especialistas em JavaScript, ao conhecerem as maravilhas de que a biblioteca é capaz, com certeza vão se perguntar: “Por que não pensei nisso antes? Iniciantes, com noções rudimentares de JavaScript, experimentarão uma curva de aprendizado inimaginável para aqueles experientes com a linguagem.

jQuery propicia a criação de scripts de uma forma tão simples e intuitiva que consegue com meia dúzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi a diretriz que norteou John Resig na criação da biblioteca.

Este livro, na primeira parte, faz a apresentação da biblioteca e um estudo da sintaxe e emprego dos seletores e comandos jQuery, desenvolvendo scripts de exemplo para cada um deles, que podem ser examinados ao vivo em arquivos disponíveis para download no site do livro. Na segunda parte são desenvolvidos vários scripts de emprego real, todos eles comentados e disponíveis para download.

jQuery A Biblioteca do Programador JavaScript

Compra online

O livro está disponível para venda online.

Confira nos seguintes endereços:

• Editora Novatec Informe o código: — maujor — e compre com 20% de desconto.
• Livraria Tempo Real KIT Maujor = HTML + CSS + jQuery
• Livraria Tempo Real jQuery
• Livraria Cultura
• Livros de Internet
• Livraria Saraiva
• Livraria Siciliano

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.