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.
Nome do produto
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.
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
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.
