Plugin jQuery Font Size 1.1

Depois de publicar a primeira versão do plugin recebi várias sugestões de melhoria e acabei detectando também algumas funcionalidades que poderiam ser acrescentadas. Inicialmente só poderíamos utilizar 4 opções (alvo, tipoPaiLink, setCookie e variacoes) com a atualização ganhamos mais uma nova, opResetar, que iremos entender mais a frente sua função.

Demo da versão 1.0
Demo da versão 1.1

O que há de novo?

• 1. Opção de criar botão para restaurar o tamanho original.

  Essa opção foi solicitada por pessoas que estão utilizando o plugin. E para implementá-la é bastante simples, só precisamos declarar o novo parâmetro da seguinte maneira:

  opResetar: true

  Perceba no demo que foi acrescentado um novo link, entre o que aumenta e diminui, que tem a função de resetar a fonte para o seu tamanho inicial.

• 2. Inserir os links manualmente

  Antes só era possível inserir os links de controle pelo plugin, declarando o tipoPaiLink como ‘ul’ ou ‘p’. Agora o desenvolvedor tem a opção de inserir manualmente o seu código XHTML  para dar maior flexibilidade na customização. Observe o exemplo abaixo.

  XHTML

  <ul>
    <li>tamanho da fonte:</li>
    <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
    <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
    <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
  </ul>

  Perceba que é preciso manter o nome das classes que controlam o tamanho: menos, resetar e mais.

  Na chamada da função teremos que modificar algumas coisas: iremos deixar o parâmetro principal vazio (já que não vamos inserir via DOM os links); não devemos declarar mais o tipoPaiLink e opResetar. Vejo o exemplo:

  $(document).ready(function() {
    $().fontSize({
       alvo: '#content',
       setCookie: true
    });
  });

• 3. Classe “desabilitar” para quando o link chegar ao limite

  Nessa nova opção você precisa configurar apenas o CSS dando estilo a classe desabilitar, que será adicionada no link quando ele não estiver mais mudando o tamanho do texto.

  CSS

  #font_size li .disabilitar {
    color: #AFAFAF;
    background-color: #DFDFDF
  }

Resumidamente temos duas opções:

Inserir manualmente os links de controle.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $().fontSize({
    alvo: '#content',
    setCookie: true
  });
});
</script>

XHTML

<ul>
  <li>tamanho da fonte:</li>
  <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
  <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
  <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
</ul>

Ou deixar o script fazer tudo sozinho.

&lt;script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#font_size').fontSize({
    alvo: '#content',
    setCookie: true,
    opResetar: true,
    tipoPaiLink: 'ul'
  });
});
</script>

XHTML

<div id="font_size"></div>

Faça o download do Plugin Font Size 1.1 ou leia o post da primeira versão para entender melhor o funcionamento.