Debugando Javascript no Internet Explorer (IE)
quarta-feira, 17 de março de 2010
Um dos problemas dos desenvolvedores de interfaces é o desenvolvimento cross-browser, ou seja, compativel com todos a maioria dos browsers.
Isso é difícil porque cada browser usa uma engine diferente tanto para renderizar a página (xhtml, css) quanto para interpretar os códigos javascript.
Com certeza o maior vilão dentre os browsers é o Internet Explorer! Mas o mercado ainda pede aplicações web para ele, por isso resolvi apresentar algumas ferramentas para facilitar o debug no IE.
São eles:
IETester – Uma ótima ferramenta para testar sua página nas versões 5, 6, 7 e 8 do Internet Explorer. (Agradecimentos ao amigo Flávio Mendes que me apresentou essa ferramenta)
DebugBar – Ferramenta semelhante ao Firebug, mas funciona com o IE (pode funcionar em conjunto com o IETester).
Companion.JS – Depurador excelente para javascript.
Com esse conjunto de ferramentas, você estará preparado para encarar o desenvolvimento para o Internet Explorer de frente!
Ou se preferir, pode fazer como o google fez com o IE 6, simplesmente declarou que não irá mais dar suporte.
Até a proxima!
Isso é difícil porque cada browser usa uma engine diferente tanto para renderizar a página (xhtml, css) quanto para interpretar os códigos javascript.
| Browser | Engine | ECMAScript Engine |
|---|---|---|
| Firefox, Mozilla | Gecko | SpiderMonkey |
| Internet Explorer 4…7 | Trident | jscript |
| Opera 9.5 | Presto Core 2 | futhark |
| Safari | WebKit | JavaScriptCore |
Com certeza o maior vilão dentre os browsers é o Internet Explorer! Mas o mercado ainda pede aplicações web para ele, por isso resolvi apresentar algumas ferramentas para facilitar o debug no IE.
São eles:
IETester – Uma ótima ferramenta para testar sua página nas versões 5, 6, 7 e 8 do Internet Explorer. (Agradecimentos ao amigo Flávio Mendes que me apresentou essa ferramenta)
DebugBar – Ferramenta semelhante ao Firebug, mas funciona com o IE (pode funcionar em conjunto com o IETester).
Companion.JS – Depurador excelente para javascript.
Com esse conjunto de ferramentas, você estará preparado para encarar o desenvolvimento para o Internet Explorer de frente!
Ou se preferir, pode fazer como o google fez com o IE 6, simplesmente declarou que não irá mais dar suporte.
Até a proxima!
Publicado em Bloggando
Adicionar Campos Dinâmicos
quinta-feira, 2 de abril de 2009
Um componente muito util para formulários é você poder adicionar campos dinâmicamente em seu formulário, por exemplo… Em um formulário de cadastro de uma pessoa, você precisa que ele preencha o formulário com todos os telefones dela.
Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.
No nosso index.html faremos nosso formulário…
Lembrando que você precisa ter o arquivo da biblioteca jquery na mesma pasta do seu index.
O nosso aplicacao.js ficaria assim:
Vamos explicar o que foi feito:
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Declara uma função chamada removeCampo.
Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.
Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.
Linha 5 - Teclara uma variavel i igual a zero.
Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.
Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).
Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.
Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.
Linha 14 - Executa a função removeCampo().
Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.
Linha 16 - Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.
Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.
Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.
Linha 19 - Executa a função removeCampo.
E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX - Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.
Quando esse formulário for submetido você receberá em seu PHP um array de telefones.
Gostaram?
Você pode ver esse exemplo funcionando clicando aqui.
Mas você não sabe quantos telefones essa pessoa tem. Então precisamos que ela possa adicionar campos nesse formulário, vou mostrar uma forma bem fácil de você resolver esse problema usando novamente a biblioteca JQuery.
No nosso index.html faremos nosso formulário…
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 04 | <head> |
| 05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 06 | <title>Exemplo</title> |
| 07 | <script type="text/javascript" src="jquery.js"></script> |
| 08 | <script type="text/javascript" src="aplicacao.js"></script> |
| 09 | </head> |
| 10 | |
| 11 | <body> |
| 12 | <div style="border:1px solid #CCC; background-color:#EFEFEF; padding:0 20px;"> |
| 13 | <h1>Exemplo Campos Dinâmicos</h1> |
| 14 | <p>Esse arquivo é parte de um arquivo feito por Maurício Faustino para mostrar como um formulário com campos dinâmicos</p> |
| 15 | |
| 16 | </div> |
| 17 | <div style="width:500px; margin:auto;"> |
| 18 | |
| 19 | <form action="mantemPessoas.php" method="post"> |
| 20 | <fieldset> |
| 21 | <legend>Dados Pessoais</legend> |
| 22 | <p> |
| 23 | <label for="nome">Nome da Pessoa</label> |
| 24 | <input id="nome" type="text" name="nome" /> |
| 25 | </p> |
| 26 | <p> |
| 27 | <label for="dataNascimento">Data de Nascimento</label> |
| 28 | <input id="dataNascimento" type="text" name="dataNascimento" /> |
| 29 | </p> |
| 30 | </fieldset> |
| 31 | <fieldset> |
| 32 | <legend>Telefones</legend> |
| 33 | <div class="telefones"> |
| 34 | <p class="campoTelefone"> |
| 35 | <input type="text" name="telefone[]" /> |
| 36 | <a href="#" class="removerCampo">Remover Campo</a> |
| 37 | </p> |
| 38 | </div> |
| 39 | <p> |
| 40 | <a href="#" class="adicionarCampo">Adicionar Telefone</a> |
| 41 | </p> |
| 42 | </fieldset> |
| 43 | |
| 44 | </form> |
| 45 | <a href="http://www.mauriciofaustino.com/2009/04/adicionar-campos-dinamicos/">Voltar para o post.</a> |
| 46 | </div> |
| 47 | </body> |
| 48 | </html> |
O nosso aplicacao.js ficaria assim:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | function removeCampo() { |
| 03 | $(".removerCampo").unbind("click"); |
| 04 | $(".removerCampo").bind("click", function () { |
| 05 | i=0; |
| 06 | $(".telefones p.campoTelefone").each(function () { |
| 07 | i++; |
| 08 | }); |
| 09 | if (i>1) { |
| 10 | $(this).parent().remove(); |
| 11 | } |
| 12 | }); |
| 13 | } |
| 14 | removeCampo(); |
| 15 | $(".adicionarCampo").click(function () { |
| 16 | novoCampo = $(".telefones p.campoTelefone:first").clone(); |
| 17 | novoCampo.find("input").val(""); |
| 18 | novoCampo.insertAfter(".telefones p.campoTelefone:last"); |
| 19 | removeCampo(); |
| 20 | }); |
| 21 | }); |
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Declara uma função chamada removeCampo.
Linha 3 - Tira qualquer função que esteja setada para ser executada quando o elemento com a classe removerCampo seja clicado.
Linha 4 - Quando um elemento com a classe removerCampo for clicado executará a seguinte função.
Linha 5 - Teclara uma variavel i igual a zero.
Linha 6 - Para cada p com a classe campo telefone dentro de um elemento com a class telefones executará a seguinte função.
Linha 7 - Incrementa a variavel i (a linha 5 e 6 servem para contar quantos p.campoTelefone existem dentro do elemento com a classe telefones).
Linha 9 - Se i for maior que 1 (se esse não for o unico elemento dentro da div telefones.
Linha 10 - Remove o pai do link clicado, ou seja, o p.campoTelefone.
Linha 14 - Executa a função removeCampo().
Linha 15 - Quando um elemento com a classe adicionarCampo for clicado.
Linha 16 - Clona o primeiro p com a classe campoTelefone e insere em uma variável que chamei de novoCampo.
Linha 17 - Procura dentro do elemento novoCampo um input e seta o value dele como vazio.
Linha 18 - Insere o elemento novoCampo depois do ultimo p com a classe campoTelefone.
Linha 19 - Executa a função removeCampo.
E está feito nosso componente de adicionar campos de telefone dinamicamente. Se você não entendeu porque eu tieve que executar a função removeCampo duas vezes, leia o artigo AJAX - Primeiros Problemas onde tem uma explicação melhor sobre esse assunto.
Quando esse formulário for submetido você receberá em seu PHP um array de telefones.
Gostaram?
Você pode ver esse exemplo funcionando clicando aqui.
AJAX – Primeiros Problemas
terça-feira, 31 de março de 2009
Um dos primeiros problemas que assombram os desenvolvedores iniciantes no AJAX é quando a página requisitada traz um elementos que tinham eventos definidos anteriormente…
Vamos exemplificar, vamos fazer um index.html com o seguinte código:
Agora temos uma página html simples, vamos para o javascript, novamente usando a biblioteca JQuery.
vamos criar o arquivo aplicacao.js com o seguinte código:
Vamos explicar as linhas:
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o elemento com id pagina1 for clicado executará uma função.
Linha 3 - Carrega o conteudo do elemento com id conteudo1 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 4 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 6 - Quando o elemento com id pagina2 for clicado executará uma função.
Linha 7 - Carrega o conteudo do elemento com id conteudo2 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 8 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 10 - Quando o elemento com id link for clicado executará uma função.
Linha 11 - Alerta o usuário que ele clicou no link.
Linha 12 - retorna falso, para o fluxo padrão do html para links não ser executado.
Criando o arquivo conteudos.html:
Pronto, está feito nosso AJAX que carrega conteudos. Mas ainda tem um problema, os links que foram carregados através do AJAX não devem estar funcionando.
Isso acontece porque a linha 10 do nosso aplicacao.js foi executada quando a página foi carregada, ou seja, o evento só foi adicionado para os elementos DOM que estavam no documento naquele momento, o que veio depois, não sofreu alteração.
Uma forma de resolver isso é executar novamente a chamada pro evento da seguinte forma:
Substituindo esse código no aplicacao.js resolveremos esse poblema, o que eu fiz foi setar uma função para ser executada depois que o ajax for concluído, ou seja, quando o nosso novo elemento esteja no DOM.
Eu usei unbind e depois bind para caso o link estivesse em outro lugar da pagina que não seja onde o ajax carregou o evento nao seja adicionado duas vezes, o que faria com que nossa função seja executada duas vezes resultando em 2 alerts.
Outra forma de resolver isso seria usando o plugin livequery, mas esse tutorial vou deixar para um próximo post.
Você pode ver um exemplo funcionando aqui.
Vamos exemplificar, vamos fazer um index.html com o seguinte código:
| HTML | | copy code | | ? |
| 01 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 02 | <head> |
| 03 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 04 | <title>Exemplo</title> |
| 05 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 06 | <script type="text/javascript" src="aplicacao.js"></script> |
| 07 | </head> |
| 08 | <body> |
| 09 | <div id="menu"> |
| 10 | <ul> |
| 11 | <li><a href="#" id="pagina1">Pagina 1</a></li> |
| 12 | <li><a href="#" id="pagina2">Pagina 2</a></li> |
| 13 | </ul> |
| 14 | </div> |
| 15 | <div id="conteudo"> |
| 16 | <p>Essa é uma pagina com um <a href="#" id="link">link</a></p> |
| 17 | </div> |
| 18 | </body> |
| 19 | </html> |
vamos criar o arquivo aplicacao.js com o seguinte código:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $("#pagina1").click(function () { |
| 03 | $("#conteudo").load("conteudos.html #conteudo1"); |
| 04 | return false; |
| 05 | }); |
| 06 | $("#pagina2").click(function () { |
| 07 | $("#conteudo").load("conteudos.html #conteudo2"); |
| 08 | return false; |
| 09 | }); |
| 10 | $("#link").click(function () { |
| 11 | alert("Você clicou no link"); |
| 12 | return false; |
| 13 | }); |
| 14 | }); |
Linha 1 - Define o código JQuery que será rodado no carregamento da página.
Linha 2 - Quando o elemento com id pagina1 for clicado executará uma função.
Linha 3 - Carrega o conteudo do elemento com id conteudo1 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 4 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 6 - Quando o elemento com id pagina2 for clicado executará uma função.
Linha 7 - Carrega o conteudo do elemento com id conteudo2 do arquivo conteudos.html (ainda vamos criar esse arquivo) para dentro do elemento com id conteudo.
Linha 8 - retorna falso, para o fluxo padrão do html para links não ser executado.
Linha 10 - Quando o elemento com id link for clicado executará uma função.
Linha 11 - Alerta o usuário que ele clicou no link.
Linha 12 - retorna falso, para o fluxo padrão do html para links não ser executado.
Criando o arquivo conteudos.html:
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 02 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 03 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 04 | <head> |
| 05 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 06 | <title>Exemplo</title> |
| 07 | </head> |
| 08 | <body> |
| 09 | <div id="conteudo1"> |
| 10 | <p>Esse é o conteudo da primeira pagina</p> |
| 11 | <p>Essa tambem é uma pagina com um <a href="#" id="link">link</a></p> |
| 12 | </div> |
| 13 | <div id="conteudo2"> |
| 14 | <p>Esse é o conteudo da segunda pagina</p> |
| 15 | <p>Essa tambem é uma pagina com um <a href="#" id="link">link</a></p> |
| 16 | </div> |
| 17 | </body> |
| 18 | </html> |
Pronto, está feito nosso AJAX que carrega conteudos. Mas ainda tem um problema, os links que foram carregados através do AJAX não devem estar funcionando.
Isso acontece porque a linha 10 do nosso aplicacao.js foi executada quando a página foi carregada, ou seja, o evento só foi adicionado para os elementos DOM que estavam no documento naquele momento, o que veio depois, não sofreu alteração.
Uma forma de resolver isso é executar novamente a chamada pro evento da seguinte forma:
| Javascript | | copy code | | ? |
| 01 | $(function () { |
| 02 | $("#pagina1").click(function () { |
| 03 | $("#conteudo").load("conteudos.html #conteudo1", function(){ |
| 04 | $("#link").unbind("click"); |
| 05 | $("#link").bind("click", function () { |
| 06 | alert("Você clicou no link"); |
| 07 | return false; |
| 08 | }); |
| 09 | }); |
| 10 | return false; |
| 11 | }); |
| 12 | $("#pagina2").click(function () { |
| 13 | $("#conteudo").load("conteudos.html #conteudo2", function(){ |
| 14 | $("#link").unbind("click"); |
| 15 | $("#link").bind("click", function () { |
| 16 | alert("Você clicou no link"); |
| 17 | return false; |
| 18 | }); |
| 19 | }); |
| 20 | return false; |
| 21 | }); |
| 22 | $("#link").click(function () { |
| 23 | alert("Você clicou no link"); |
| 24 | return false; |
| 25 | }); |
| 26 | |
| 27 | }); |
Eu usei unbind e depois bind para caso o link estivesse em outro lugar da pagina que não seja onde o ajax carregou o evento nao seja adicionado duas vezes, o que faria com que nossa função seja executada duas vezes resultando em 2 alerts.
Outra forma de resolver isso seria usando o plugin livequery, mas esse tutorial vou deixar para um próximo post.
Você pode ver um exemplo funcionando aqui.
JQuery – Primeiros Passos
terça-feira, 24 de março de 2009
As páginas da web estão cada vez mais dinamicas e interativas, algumas coisas antigamentes só eram possíveis de ser feitas com flash, applets java ou algo parecido, hoje com códigos JavaScript veremos que podemos fazer algumas coisas muito interessantes…
O JavaScript foi criado pela netscape para atender principalmente as necessidades de validação de formulários do lado do cliente e fazer interações com a página, mudando atributos das suas tags html, conteudos e até mesmo fazer requisições assincronas (AJAX). Podendo assim desenvolver páginas que estão dentro do que apelidamos de web 2.0.
Hoje em dia, nós desenvolvedores temos alguns frameworks para facilitar o trabalho com essa linguagem. Podemos citar alguns conhecidos: Prototype, Mootools, JQuery, YUI, Dojo, GWT, Rico, entre outros…
Eu tive maior afinidade com o framework JQuery principalmente pela facilidade que ele oferece no desenvolvimento do seu código, e também pelas poucas oportunidades de contato que tive com os outros frameworks. O JQuery tem como premissa simplificar o código JavaScript, tanto que seu slogan é “The Write less, Do More, Javascript Library”. Não há nada melhor para um programador do que escrever menos e fazer mais não acham? Nesse post vou fazer um exemplo simples usando JQuery, futuramente vou postar ideias mais complexas que podem ser aplicadas nesse ótimo framework.
Então mão na massa, antes de tudo temos que incluir a biblioteca JQuery em nossa página xhtml:
Inseri a biblioteca atravez do link estático que a comunidade disponibilizou para quem quer inserir o framework em seu site, mas você pode também baixar o jquery e coloca-lo em seu servidor para linkar nele. Com isso estamos liberados para programar usando o JQuery na nossa página xhtml. vamos fazer um hello world bem inútil colocando a frase "Hello World" dentro da nossa tag <body> através do framework. Com o:
limitamos onde será inserido meu código JQuery, eu consigo pegar qualquer elemento da minha página com as facilidades que os seletores definidos no CSS 3 oferecem. Com isso conseguimos colocar eventos não obstrusivos em nossos elementos. podendo facilmente separar o javascript, css e xhtml que é um ótimo padrão de desenvolvimento web. Exemplo de evento não obstrusivo:
Com isso, quando o link "Clique Aqui..." for clicado o browser vai disparar um alert, sem que tenha que ser colocado o atributo "onclick" na tag <a> Em breve teremos mais ideias interessantes aqui no blog. Você pode acessar a documentação do JQuery para ver os eventos, efeitos, e metódos disponíveis...
O JavaScript foi criado pela netscape para atender principalmente as necessidades de validação de formulários do lado do cliente e fazer interações com a página, mudando atributos das suas tags html, conteudos e até mesmo fazer requisições assincronas (AJAX). Podendo assim desenvolver páginas que estão dentro do que apelidamos de web 2.0.
Hoje em dia, nós desenvolvedores temos alguns frameworks para facilitar o trabalho com essa linguagem. Podemos citar alguns conhecidos: Prototype, Mootools, JQuery, YUI, Dojo, GWT, Rico, entre outros…
Eu tive maior afinidade com o framework JQuery principalmente pela facilidade que ele oferece no desenvolvimento do seu código, e também pelas poucas oportunidades de contato que tive com os outros frameworks. O JQuery tem como premissa simplificar o código JavaScript, tanto que seu slogan é “The Write less, Do More, Javascript Library”. Não há nada melhor para um programador do que escrever menos e fazer mais não acham? Nesse post vou fazer um exemplo simples usando JQuery, futuramente vou postar ideias mais complexas que podem ser aplicadas nesse ótimo framework.
Então mão na massa, antes de tudo temos que incluir a biblioteca JQuery em nossa página xhtml:
| HTML | | copy code | | ? |
| 1 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 3 | <head> |
| 4 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 5 | <title>Exemplo</title> |
| 6 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 7 | </head> |
| 8 | <body></body> |
| 9 | </html> |
Inseri a biblioteca atravez do link estático que a comunidade disponibilizou para quem quer inserir o framework em seu site, mas você pode também baixar o jquery e coloca-lo em seu servidor para linkar nele. Com isso estamos liberados para programar usando o JQuery na nossa página xhtml. vamos fazer um hello world bem inútil colocando a frase "Hello World" dentro da nossa tag <body> através do framework. Com o:
| HTML | | copy code | | ? |
| 1 | $(function () { //AQUI VEM O CÓDIGO } ); |
limitamos onde será inserido meu código JQuery, eu consigo pegar qualquer elemento da minha página com as facilidades que os seletores definidos no CSS 3 oferecem. Com isso conseguimos colocar eventos não obstrusivos em nossos elementos. podendo facilmente separar o javascript, css e xhtml que é um ótimo padrão de desenvolvimento web. Exemplo de evento não obstrusivo:
| HTML | | copy code | | ? |
| 01 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 02 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
| 03 | <head> |
| 04 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| 05 | <title>Exemplo</title> |
| 06 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> |
| 07 | <script type="text/javascript"> |
| 08 | $(function () { |
| 09 | $(".botaoNaoObstrusivo").click(function () { |
| 10 | alert("Hello World"); |
| 11 | }); |
| 12 | }); |
| 13 | </script> |
| 14 | </head> |
| 15 | <body> |
| 16 | <a href="#" class="botaoNaoObstrusivo">Clique Aqui...</a> |
| 17 | </body> |
| 18 | </html> |
Com isso, quando o link "Clique Aqui..." for clicado o browser vai disparar um alert, sem que tenha que ser colocado o atributo "onclick" na tag <a> Em breve teremos mais ideias interessantes aqui no blog. Você pode acessar a documentação do JQuery para ver os eventos, efeitos, e metódos disponíveis...
Creative Commons - 2010 - Maurício Faustino