Personalizar Fonte E Estilo Da Página Com jQuery
Permitir ao usuário personalizar a aparência dos elementos da página não é apenas um recurso estético, mas também de usabilidade.
Por exemplo um texto de parágrafo com tamanho da fonte de 12px. Para a maioria o tamanho possibilita uma leitura confortável. Contudo, existem minorias com dificuldades diversas, entre elas oftalmológicas que podem achar o tamanho da fonte pequeno.
Sendo assim, em um website com muitos textos, disponibilizar na página a opção de aumentar o tamanho da letra é um recurso inteligente.
Vejamos como criar esta possibilidade utilizando o jQuery para alterar o tamanho da letra dos parágrafos.
Estrutura Da Página
A página será composta por uma div contendo texto e foto do produto e outra com os links para aumentar, diminuir e resetar o tamanho da letra.
<div class="escolhas" id="fonte">
<span class="fechar">x</span>
<p>Tamanho da fonte</p>
<a href="#" class="aumentar">A+</a>
<a href="#" class="diminuir">A-</a>
<a href="#" class="padrao">Padrão</a>
</div>
<div class="produto-div">
<img src="imagem01.jpg" width="300" height="225" alt="monitor" />
<h2>Nome do produto</h2>
<p>Donec non felis quis augue interdum accumsan. Nulla at libero. Nunc ultricies auctor sapien. Praesent quis quam et massa tincidunt luctus. Vivamus nibh. Sed ligula. Nunc non est a augue tempor lacinia. Mauris lectus pede, porta tempus, ultrices sed, dignissim sed, justo. Suspendisse porta. Fusce arcu. Sed vehicula libero a odio. Mauris lectus pede, porta tempus. </p>
</div>
Observe o nome das classes atribuídas, elas servirão de seletores no código javascript.
Capturando Os Valores
Iniciamos o código javascript preenchendo as variáveis com os valores necessários para manipular o tamanho da letra.
$(function(){
$('.escolhas a').click(function(){
var normal = $('p').css('font-size');
var recipiente = '.produto-div p';
var acao = $(this).attr('class');
var atual = parseFloat($(recipiente).css('font-size'));
})
})
O function no início é para que o código só execute após a árvore DOM do documento estar completa.
No documento, a div que contém os links para aumentar e diminuir a fonte, possue a classe “escolhas”.Quando um dos links for clicado é rodado o código entre as chaves.
A primeira variável recebe o valor da propriedade CSS font-size aplicado aos parágrafos. Isso serve para sabermos o tamanho padrão dos textos e mais adiante aplicar este valor quando o usuário decidir utilizar o tamanho de letra original.
No caso da página criada, o tamanho padrão dos parágrafos é 13px. E é este o valor que a variável normal recebe.
Para a variável recipiente, é indicado quais partes do documento serão afetadas pelo código. Queremos que apenas os parágrafos dentro da produto-div sejam redimensionados. Para aplicar a outra div, basta adicionar uma vírgula entre os seletores.
Volte ao arquivo HTML e veja que cada link possue uma classe distinta. É este atributo do link clicado “(this)” que popula a variável “ação”. Mais adiante você entenderá o porquê.
Por fim a variável “atual” recebe qual o tamanho da fonte no momento. O “recipiente” que serve como seletor é a variável criada logo acima que restringe a ação a determinada div. Desta, é recuperada o tamanho da letra.
O problema é que o valor vem completo, até com a unidade. Para separar o número do ‘px’, utilizamos o parseFloat. Esta função serve para retornar o primeiro número de uma string. Então“10px” tornam-se “10”.
Alterando O Tamanho Da Fonte
Com todos os valores a postos vamos definir o que acontece conforme determinada ação.
if (acao == 'aumentar')
{
var novotamanho = atual*1.1;
$(recipiente).css('font-size', novotamanho);
}
Se a variável “ação” recebeu como valor a classe “aumentar” que foi designada para o texto que contém um sinal de mais ao lado da letra A, o tamanho da letra deve ser aumentado.
O cálculo para isso é uma multiplicação simples. O tamanho atual da fonte é multiplicado por 1.1 e o resultado é recebido pela variável “novotamanho”.
Em seguida os parágrafos da div produto recebem o novo valor para a propriedade font-size através da função css do jQuery.
Podemos ir um pouco além e limitar o tamanho máximo das letras para que o layout não comece a ficar estranho demais. Para isso antes de aplicar o novo valor para o tamanho da fonte é feita uma verificação.
if (acao == 'aumentar')
{
var novotamanho = atual*1.1;
if (novotamanho < 36)
{
$(recipiente).css('font-size', novotamanho);
}
}
Com isso o tamanho máximo da fonte será de 36px.
O código para diminuição do tamanho das letras segue a mesma lógica, só mudam os números, com o tamanho mínimo da fonte permitido de 8px.
if (acao == 'diminuir')
{
var novotamanho = atual*0.9;
if (novotamanho > 8)
{
$(recipiente).css('font-size', novotamanho);
}
}
Para que o tamanho da fonte retorne ao original quando o usuário clicar no link ‘padrão’, bastam esta poucas linhas.
if (acao == 'padrao')
{
$(recipiente).css('font-size', normal)
}
O código reunido:
$('.escolhas a').click(function(){
var normal = $('p').css('font-size');
var recipiente = '.produto-div p';
var acao = $(this).attr('class');
var atual = parseFloat($(recipiente).css('font-size'));
if (acao == 'aumentar')
{
var novotamanho = atual*1.1;
if (novotamanho < 36)
{
$(recipiente).css('font-size', novotamanho);
}
}
if (acao == 'diminuir')
{
var novotamanho = atual*0.9;
if (novotamanho > 8)
{
$(recipiente).css('font-size', novotamanho);
}
}
if (acao == 'padrao')
{
$(recipiente).css('font-size', normal)
}
return false;
})
O return false no final previne que a página pule para o topo quando um dos links for clicado.
Alterar Estilo Da Página
Possibilitar a alteração da aparência dos elementos da página oferece uma melhor experiência para o usuário. Não é apenas um recurso legal.
O mais incrível é como o jQuery facilitou nossa vida de programadores na hora de implantar esta funcionalidade no código.
Código HTML
<div id=”#cor”>
<a href="#" class="contraste" rel="contraste">Contraste</a>
<a href="#" rel="estilo">Normal</a>
</div>
O elemento chave desses links é o atributo rel.
Código Javascript
$('#cor a').click(function(){
var estilo =$(this).attr('rel')+ '.css';
$('link[rel=stylesheet]').attr('href', estilo);
})
Quando um dos links dentro da div #cor for clicado, a variável “estilo” vai receber o valor do atributo rel deste link e adicionar o ‘.css’ ao final da string para formar o nome completo o arquvo. Se o primeiro link for clicado, será retornado “contraste.css” para a variável.
Em seguida o código procura na página um elemento link que possua no atributo rel o valor stylesheet. Como ele somente é utilizado para importar arquivos css para a página sabemos exatamente qual link será afetado. Então ao href desta tag será atribuído o conteúdo da variável estilo criada anteriormente.
Conclusão
Você sabe agora a criar duas das principais e mais úteis opções de customização de uma página. Você pode ir além e criar cookies para armazenar as preferências do usuário para que quando ele voltar à página, ela fique configurada com as mesmas opções da visita anterior.
DOWNLOAD: Descarregue o código utilizado neste tutorial para Personalizar Fonte E Estilo Com jQuery, em formato .zip.
