você pode usar o jQuery para dar aos visitantes do seu site a capacidade de redimensionar a fonte do seu site. Esta é uma interface útil para ter, uma vez que seus visitantes podem ampliar ou reduzir o tamanho da fonte em seu lazer, dando-lhes a melhor experiência de leitura. Se você não estiver familiarizado com o jQuery, confira nosso artigo básico do jQuery para obter uma explicação de como o jQuery funciona.
esta é uma exibição de código interativo que mostra o HTML, CSS, jQuery e uma demonstração da saída.
configurando HTML para redimensionar
a primeira coisa que você precisa fazer é configurar seu HTML para que o jQuery possa determinar o que redimensionar. Se você não estiver familiarizado com equipar seu documento HTML para fazer referência ao jQuery, consulte nosso artigo getting Your HTML Ready for jQuery.
primeiro, você precisa adicionar uma interface de redimensionamento. Não se preocupe, isso parece mais complicado do que realmente é. Isso é apenas algo com o qual os usuários do seu site podem interagir para redimensionar a fonte da sua página da web. Como você pode ver no exemplo acima, usamos links que foram representados como mais, menos e a palavra “Redefinir.”
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
cada link deve ter uma classe que represente a ação, como” aumentar “ou” diminuir.”Quando adicionarmos o jQuery, usaremos essas classes para indicar qual link deve aumentar, diminuir ou redefinir o tamanho da fonte.
agora, avalie quais elementos ou seções você deseja redimensionar. Se for uma seção, você pode querer criar um < div > com uma classe para que você possa especificar uma área exclusiva a ser redimensionada.
veja a caneta jQuery: redimensionando exemplo de classe de fonte de página da Web por Redes de pares (@pairdocs) no CodePen.
no exemplo acima, você pode ver que o < div > com a classe=”redimensionável” está marcado para ser redimensionado. No entanto, o restante de seus parágrafos não será afetado, a menos que você especifique que todos os elementos <p> também devem ser redimensionados.
jQuery para redimensionar
jQuery lida com o levantamento pesado de redimensionamento. Se você não estiver familiarizado com o jQuery, confira nosso artigo básico do jQuery para entender os conceitos comuns.
o primeiro passo é criar um $ (documento).função pronta que envolverá todas as suas instruções jQuery.
$(document).ready(function(){//jQuery statements//jQuery statements});
em seguida, vamos adicionar a primeira instrução jQuery para ir dentro desta função.
var resize = new Array('element','.class'); resize = resize.join(',');
esta declaração estabelece quais elementos ou classes devem ser incluídos no redimensionamento. Esses elementos / classes são armazenados na variável ” redimensionar.”Se você olhar para o exemplo de fonte de redimensionamento, verá que o elemento <p> e a classe “redimensionável” foram escolhidos para redimensionamento.
depois de estabelecer quais elementos ou classes serão afetados, você precisa configurar o código para realmente alterar o tamanho da fonte quando um visitante interage com sua interface de redimensionamento.
redefina o tamanho da fonte
em nossa instrução “var resize”, adicionaremos uma instrução que redefinirá a fonte para seu tamanho original.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
esta instrução chama os elementos ou classes que você armazenou na variável ” redimensionar “e, quando o link com a classe” Redefinir ” é clicado, o atributo font-size em CSS retornará ao seu tamanho original.
o $(“.redefinir”).clique (function () chama a classe “reset” do HTML. Isso permite que o jQuery redefina o tamanho da fonte quando o usuário interage com o texto associado à classe “Redefinir”. Em nosso exemplo, este texto é simplesmente o link “Redefinir”.
aumente o tamanho da fonte
em seguida, precisamos adicionar uma instrução que aumentará o tamanho da fonte. Em nosso exemplo, adicionamos a classe “aumentar” ao link”+”, portanto, precisamos vincular a ação jQuery de aumentar o tamanho ao”+”.
este exemplo faz exatamente isso.
//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });
o exemplo começa estabelecendo que esta instrução depende de um usuário clicar no texto associado à classe “aumentar”. Este é um ” + ” em nosso exemplo. As próximas três linhas adicionam novas variáveis: originalFontSize, originalFontNumber, e newFontSize.
originalFontSize coleta o tamanho da fonte atual do CSS e o armazena. o originaFontNumber analisa esse número para que o jQuery possa lê-lo. Então, newFontSize pega o número armazenado em originalFontNumber e multiplica por 1.2.
em seguida, a última linha entra no CSS e altera o tamanho da fonte para corresponder ao newFontSize.
esta sequência será executada sempre que o ” + ” for clicado.
diminuir o tamanho da fonte
a instrução diminuir é muito semelhante à instrução anterior. No entanto, em vez de multiplicar o tamanho da fonte por um número que aumentará o número da fonte original, a instrução decrease multiplica o número da fonte original por um decimal, o que o reduz.
//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});
esta sequência será executada sempre que o “-” for clicado. Isso reduzirá o tamanho da fonte a cada clique.
jQuery é um software de código aberto permissivo sob uma licença MIT. jQuery não é um produto da Pair Networks, Inc., e Redes de pares não oferece garantia para jQuery. Observe que existem muitos níveis de bibliotecas javascript disponíveis. Consulte seu profissional de TI para obter conselhos e orientações sobre uma biblioteca apropriada. Este produto específico pode ou não atender às suas necessidades. Par Networks, Inc. está fornecendo suporte para este tutorial para sua conveniência e não é responsável pelo desempenho do jQuery. Leia atentamente os Termos e o escopo dos serviços para qualquer serviço ou produto on-line que você esteja considerando comprar ou usar.
