Visite o projeto online.

Em diversos sites precisei de um bom plugin jquery para controlar o tamanho das fontes e não consegui encontrar. Foi a partir dessa necessidade que decidi desenvolver  o plugin Font Size, que visa facilitar os desenvolvedores na tarefa de implementar esse controle. Vejamos como utilizá-lo.

Veja o demo.

Para a implementação do plugin precisaremos dos scripts: cookie e o fonSize + biblioteca jQuery.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script><!-- Requerido caso queira guardar no cookie -->
<script type="text/javascript" src="font_size.js"></script>

O parâmetro principal deve ser a div onde ficarão guardados os links de controle. Em nosso exemplo usaremos a div#font_size.

$(document).ready(function() {
   $("#font_size").fontSize();
});

No XHTML declare apenas a div vazia que o script se encarrega de incluir os links.

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

Podemos customizar as funcionalidades do nosso plugin. Observe as opções.

• alvo podemos declarar um ou mais alvos separados por virgula. Em nosso exemplo utilizamos a div#content. Caso o alvo não seja declarado todo documento sofre a alteração no tamanho da fonte.
• tipoPaiLink informa se os links devem estar dentro de uma lista <ul> ou dentro de um <p>. Os parâmetros podem ser: ‘ul’ ou ‘p’.
• setCookie quando declarado true deixa salvo a ultima ação do usuário, de modo que quando houver uma nova visita o tamanho da última ação será mantido. Caso não queira usar a função de cookie declare como false (nesse caso não será mais necessário o script cookie.js).
• variacoes tem quantidade 7 declarado como padrão, onde 4 é o tamanho declarado como 100% no CSS. Caso aumente a quantidade de variações lembre-se de declarar todas as classes no CSS. Observe que a classe padrão separa igualmente o número de variações para mais e para menos. Por exemplo se eu declaro variacoes: 11 a  classe padrão detectada pelo script será a 6 sendo 5 variações de aumento e 5 variações de diminuição.

Veja agora como nosso script ficou com o acréscimo dos parâmetros.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script&gt;
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#font_size").fontSize({
    alvo: '#content', //Alvo(s) da atuação do script
    tipoPaiLink: 'ul', //Guardando os links de controle em uma <ul>
    setCookie: true,//Ativando opção de cookie
    variacoes: 7 //7 variações (3 para mais e 3 para menos)
  });
});
</script>

No CSS podemos customizar o quanto vai mudar a cada nova ação. No exemplo eu utilizei medidas em porcentagem, mas você pode usar outras medidas de acordo com a sua necessidade.

.tam1 p, .tam1 li { font-size: 80%}
.tam2 p, .tam2 li { font-size: 90%}
.tam3 p, .tam3 li { font-size: 95%}
.tam4 p, .tam4 li { font-size: 100%} /* tamanho padrão */
.tam5 p, .tam5 li { font-size: 105%}
.tam6 p, .tam6 li { font-size: 110%}
.tam7 p, .tam7 li { font-size: 120%}

Para estilizar os links de controle utilize as classes .mais e .menos. No exemplo criei um estilo simples.

#font_size ul { float: right; }
#font_size ul li { float: left; margin-right: 3px}
#font_size a {
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  background: #ccc;
  color: #4F4F4F
}

O que há de novo ?

• Opção de declarar aonde o script vai atuar. O desenvolvedor declara um ou mais alvos que sofrerão a alteração no tamanho da fonte.
• Gera via DOM um xhtml limpo. Com uma simples classe no alvo o fontSize controla o tamanho de seus textos descendentes.
• Dispõe da opção de salvar em cookie. Diminuindo a tarefa do usuário de esta sempre clicando para adaptar ao melhor tamanho a cada nova visita. Uma vez adaptado o cookie já guardará a informação e em uma nova visita tudo estará na mesma configuração.
• Por trabalhar com a biblioteca jQuery é completamente Cross-browser. Testado em FireFox 3+, Internet Explorer 6+, Chrome, Opera e Safari.

Faça o download do Plugin Font Size 1.0.

Veja o demo.

Vejamos inicialmente o XHTML do nosso exemplo. Observe que deve ser declarado o atributo “title” do link, que será utilizado posterior mente pelo script para ser exibido no tooltip.

<ul id="nav">
  <li><a href="#" title="Ir para a página inicial">HOME</a></li>
  <li><a href="#" title="Conheça o autor">SOBRE</a></li>
  <li><a href="#" title="Dúvidas e sugestões">CONTATO</a></li>
</ul>

No CSS utilizei um estilo básico para que vocês customizem de acordo com o layout desejado.

* { margin: 0; padding:0; list-style: none}
body {font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 12px }
a { text-decoration: none; color: #4081CF}
/* estilo para o menu */
#nav {
  float: left;
  width: 390px;
  background: url(img/bg_menu.gif) no-repeat
}
#nav li {
  float: left;
  position: relative
}
#nav li p {
  background-color: #e6e6e6;
  border: 1px solid #bfbfbf;
  color: #4c4c4c;
  width: 150px;
  padding: 10px;
  text-align: center;
  position: absolute;
  top: 70px;
  z-index: 5
}
#nav li a {
  width: 130px;
  height: 54px;
  line-height: 54px;
  font-size:18px;
  display:block;
  text-align: center;
  color: #bcbcbc
}
#nav li a:hover { color: #818181 }

Vamos entender nosso script. Na função each acessamos todos os links para resgata o valor do seu atributo “title” e colocá-lo em um respectivo <p>, que será exibido na animação.

Para o efeito de animação criamos uma função hover, que exibirá o parágrafo com o conteúdo do title do link. Observe:

$(document).ready(function() {
  $("#nav li a").each(function(i) {
      $(this).parent().append("<p></p>"); // adicionando um <p> dentro da <li>
      var textoTitle = $(this).attr("title"); // resgatando o valor do atributo "title"
      $(this).removeAttr("title"); // removendo o attributo title
      $(this).next("p").text(textoTitle).hide(); //colocando o texto do title dentro do <p>
  });
  $("#nav li a").hover(function() {
     $(this).next("p").animate({opacity: "show", top: "50px"}, "slow");
  },
  function() {
     $(this).next("p").animate({opacity: "hide", top: "70px"}, "fast");
  });
});

Vantagens:

• É acessível, pois caso o browser não tenha suporte a script será exibido o tooltip padrão para links.
• Acessa os elementos via DOM, o que otimiza o script diminuindo repetições de códigos.
• É completamente cross browser. Funciona perfeitamente nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download e ajuste às suas necessidades.

Demo do resultado.

Para melhor entendimento, vejamos primeiramente o código XHTML abaixo:

<ul class="lista_script">
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
 <li><h3><a href="index.html">Título da notícia relacionada</a></h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat mauris et leo congue in fermentum neque volutpat. Aenean dignissim leo eu erat suscipit id condimentum mi adipiscing</p>
 </li>
</ul>

Antes da prática de se trabalhar com DOM (javascript), esse problema era resolvido da seguinte forma, colocava-se a tag <a> como pai da <li>, o que não é semanticamente correto. Pois a tag <a> é do tipo inline e <li> do tipo block. Segundo as recomendações do W3C os elementos do tipo inline devem está contidos dentro de elementos block, logo não é válido declarar block dentro de inline.

A solução encontrada foi resgatar, via jquery,  o atributo “href” da primeira tag <a> e adicionar o evento click na <li>. Para complementar o script criei um efeito hover na <li> que pode ser personalizado na classe “.hover” no CSS.

O resultado:

CSS

* { margin: 0; padding: 0}   ul { list-style: none} //reset
body { font-family: "Trebuchet MS", Arial; font-size: 12px}
.lista_script li {
  border-bottom: 1px solid #e1e1e1;
  padding: 10px
}
.lista_script li h3 {
  margin-bottom: .7em;
  font-size:14px
}
.lista_script .hover { background-color: #ececec}
.lista_script li {cursor: pointer}

Javascript (jquery)

Não esquecer de colocar dentro da tag <head>.

$(document).ready(function() {
//função efeito hover
  $(".lista_script li").hover(function () {
      $(this).addClass("hover");
    },
    function () {
      $(this).removeClass("hover");
  });
//função click
  $(".lista_script li").click(function() {
     var destino = $(this).find("a:first").attr("href");
     //resgatando link da primeira tag "a" dentro da "li"
     window.location = destino;
  });
});

Vantagens

• Executa as funções do jquery via DOM, desta forma não é necessário adicionar novos atributos nos elementos do XHTML.
• XHTML acessível, pois mesmo que o browser não tenha suporte a javascript o usuário poderá utilizar o link do título normalmente.
• Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download do tutorial e ajuste às suas necessidades.

Sem muita conversa, vamos praticar! Esse tutorial tem o propósito de criar uma lista de definição com o efeito toggle do jquery. E funciona da seguinte maneira: quando o usuário clicar no link, localizado dentro da tag “dt”,  a definição desse título (dd) abrirá com efeito slide (Veja os códigos abaixo).

Veja o demo.

XHTML:

<dl class="lista_definicao">
 <dt><a href="#">Título exemplo 1</a></dt>
 <dd>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
 </dd>
 <dt><a href="#">Título exemplo 2</a></dt>
 <dd>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dui diam, tincidunt eu dignissim non, blandit non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </dd>
</dl>

CSS

* { margin: 0; padding: 0}
.lista_definicao dt a {
  display: block;
  padding: 5px;
  background-color: #e1e1e1}
.lista_definicao dt a.ativo {
  background-color:#666666;
  color: #fff
}
.lista_definicao dd {
  display: none;
  padding: 10px;
  background-color: #EFEFEF
}

Javascript (jquery)

Para tudo funcionar você precisa linkar para a biblioteca do jquery e configurar a função toggle (dentro da tag “head” do documento) como podemos ver abaixo.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $(".lista_definicao dt a").toggle(function() {
     $(this).parent().next("dd").slideDown(800);
     $(this).addClass("ativo");
  },
  function() {
     $(this).parent().next("dd").slideUp(800);
     $(this).removeClass("ativo");
  });
});
</script>

Vantagens deste script:

• Caminha pela arvore do DOM, logo é possível adicionar dinamicamente vários “dt” e “dd” que funcionará sem a necessidade de inserir novos ids ou classes.
• Você pode customizar o CSS adicionando novos estilos a títulos, descrição e até mesmo para a classe “ativo” (que é adicionada quando clicamos no link).
• Funciona nos principais browsers: Internet Explorer 6+, FireFox, Chrome, Safari e Opera.

Faça o download do tutorial e ajuste às suas necessidades.