jQuery: O Efeito show

Hoje resolvi mostrar um pouco das possibilidades do jQuery.

Existem muitas coisas que se pode fazer com esta biblioteca de javascript e seus plugins.

Não se esqueça que antes de testar qualquer destes exemplos, deve ter instalado no blogue o jQuery. Aprende em Como colocar jQuery num blogue, a melhor maneira de instalar.

Eu mesmo utilizo aqui no blogue alguns deles, mas neste artigo para não complicar muito, vou começar por um efeitos dos mais simples. Que pode ser muito útil em caso de publicarmos algum spoiler num artigo por exemplo. ;)

Então vou demonstrar como fazer algo escondido aparecer:

Olha eu aqui.

Clique no botão acima.

Este efeito consegue-se criando um elemento ou link que vai servir como botão para dar inicio ao efeito, no exemplo utilizei um botão mas poderia ter colocado um link, uma div ou span, e claro o elemento onde vamos aplicar o efeito, que pode ser uma div, uma span ou até texto dentro duma tag p. Qualquer que seja o caso, o importante é dar os estilos no CSS que melhor se adapte ao blogue ou no caso de texto num artigo, ao resto do texto do artigo...

Ao criar o elemento a aplicar o efeito, damos-lhe uma class ou id. Aqui está o HTML do elemento utilizado no exemplo acima:

<button id="um">Mostrar</button>
 <div id="exemplo1">
Olha eu aqui. <img class="emoticon" src="http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" alt=":D" title=":D" />
</div>

E a seguir colocamos o estilo no CSS, que podemos colocar o estilo que quisermos seja com borda, ou cor de fundo, tipo de fonte, tamanho da fonte, dimensões do elemento, etc...
Aqui está o estilo do exemplo acima:

#exemplo1 {
   width: 500px;
   border: 1px solid gold;
   padding-left:20px;
   display:none;
   background:skyBlue;
   color:black;
}

A linha 5 destacada acima é a parte mais importante do CSS para este efeito, porque é o que diz aos navegadores para não mostrar o elemento. O resto dos estilos são opcionais conforme desejamos que o elemento seja visualizado...

Para finalizar, temos que colocar o código javascript que vai fazer o efeito funcionar e aqui temos duas opções devido a condicionantes da plataforma Blogger:

1. Se o elemento a aplicar o efeito se encontrar dentro dum artigo, podemos colocar o código javascript dentro do próprio artigo ao fundo do artigo da seguinte maneira:
   • 
     

     <script type="text/javascript"> $(document).ready(function(){ $("button#um").click(function () { $("#exemplo1").show("slow"); }); }); </script>

     
     

   • Se escolher esta opção, tenha cuidado que o código DEVE ficar todo numa única linha mas DEVE também respeitar os espaços entre cada parte do código. Isto no caso de nas opções termos definido em Quebras de linha, a opção Premir "Enter" para inserir quebras de linha. A maioria dos utilizadores tem sempre esta opção definida...

     Para mais informação sobre a opções ao publicar artigos, ler: Blogger: Publicar / Editar artigos.
     Existe uma excelente ferramenta online que remove as Quebras de linha de texto ou códigos e que utilizo muito para inserir códigos que necessitam de ser escritos numa só linha: Line Break Removal Tool.

   • Embora nada impeça de utilizar a segunda opção que é...
2. Colocar o código no próprio template do blogue, e neste caso deve colocar ABAIXO de onde tem instalado o jQuery. Geralmente, a melhor maneira é colocar mesmo acima de </head> e deve-se fazer uma pequena alteração para ficar da seguinte maneira:
   • 
     

     
     <script type='text/javascript'>
     //<![CDATA[
       $(document).ready(function(){
         $("button#um").click(function () {
           $("#exemplo1").show("slow");
         });
       }); 
     //]]>
     </script>
     

     
     

Nas linhas 2 e 8 destacadas acima, é o que se deve acrescentar ao javascript colocado no HTML do Modelo para que o Blogger não mexa no código.

Explicando um pouco o javascript:

$(document).ready(function(){ , esta parte significa que o efeito só inicia quando a pagina terminar de carregar.

$("button#um").click(function () { , aqui é onde se coloca a ID do elemento que inicia o efeito, neste caso como utilizei um botão com uma ID está dessa maneira, mas se tivesse utilizado por exemplo uma div com id colocava "#ID DA DIV".

$("#exemplo1").show("slow");, nesta parte é onde se coloca a ID do elemento a que se vai aplicar o efeito, neste caso uma div e que com o efeito show e que vai aparecer lentamente (slow), mas também podemos colocar a velocidade em milissegundos: 600, 400 e 200, o equivalente a "slow", "normal" e "fast".

Até Breve. :-F

Queres ler outro artigo ao calhas?