Detalhes

Categoria: Javascript

Atualização: Sexta, 17 Setembro 2010 18:36

Autor: vovó Vicki

Acessos: 14534

Este tutorial vai mostrar através de um exemplo bem simples como criar um código jQuery associado a estilos para fazer tabelas listradas, aquelas em que as cores das linhas vão se alternando.

Podemos obter o mesmo resultado usando uma porção de métodos. O mais básico de todos é usar atributos das tags do HTML.

A tabela fica como a mostrada ao lado. Até que não está ruim, mas a mão de obra vai ser grande porque, para cada tabela com listras, vamos ter que escrever tudo de novo!

Existe uma saída um pouco mais elegante e menos trabalhosa: podemos usar uma folha de estilo onde definimos classes com as características desejadas que depois podem ser aplicadas a determinados elementos do documento. Por exemplo:

Ficou um pouco menos poluído, mas o trabalho ainda é praticamente o mesmo. Será que existe um jeito mais fácil de obter o mesmo resultado? Existe sim! Podemos fazer um javascript que faz o trabalho para nós ou usar um que já esteja pronto, como o script do Matthew Pennell. É um belo avanço, mas tem um jeito muito melhor e muitíssimo mais fácil.

Criando objetos jQuery

Como sempre, para que possamos acessar a biblioteca jQuery, ela precisa ser incorporada à(s) página(s). Altere o caminho para a biblioteca de acordo com o diretório onde você escolheu colocá-la.

Agora chegou a hora de pedir para a biblioteca trabalhar para nós. Se você ainda não sabe, $ é um alias para a classe jQuery e $( ) constrói um novo objeto jQuery. Este objeto tem informação que não acaba mais. Por exemplo, se precisarmos mexer em todos (ou alguns, dependendo do caso) parágrafos de um documento HTML, chamamos a jQuery com o seletor "p" para obter todos os elementos p do documento: $("p"). A mesma coisa pode ser feita com qualquer elemento do DOM.

De posse do(s) elemento(s), podemos acionar métodos (funções) da classe jQuery relacionadas a ele. Vou dar um exemplo mais claro usando o elemento a. Na forma tradicional escreveríamos o seguinte:

Neste caso criamos o elemento a, definimos para este elemento um evento onclick que, quando ocorrer, dispara uma mensagem de alerta. Podemos obter exatamente a mesma coisa usando a biblioteca jQuery com:

Neste exemplo a seqüência é a seguinte: obtemos um objeto jQuery com $( ), que nos traz o elemento document. Chamamos o método (ou função) ready (pronto) deste elemento com $(document).ready( ). Esta função nos indica quando o DOM for completado. Assim que isto ocorrer, acionamos uma nova função com function(), que é definida logo a seguir com a requisição de um novo objeto jQuery, desta vez solicitando todos os elementos a. Usamos um dos métodos do elemento a, a função click( ). Este método define um evento onclick. Finalmente definimos uma função para quando este evento ocorrer novamente com function() e especificamos que deve ser dado um alert("Olá. Você me clicou!").

Primeira diferença: na forma tradicional, apenas o link com onclick dará a mensagem quando for clicado; com a jQuery, todos os links do documento darão a mensagem quando forem clicados. Segunda diferença: o código para a jQuery parece muito mais complicado. Até concordo com isto, mas quando foi que, começando a tomar contato com alguma coisa nova, tudo não parecia mais complicado? E quando foi que, depois de se acostumar com as novidades, as coisas se tornaram muito simples? Comigo sempre foi (e ainda é) assim :smile:

Classificando elementos

Já vimos que, ao criar um objeto com "p" ou "a", temos acesso a todos os que existirem no documento. Como nosso objetivo é fazer com que determinadas tabelas sejam listradas, não todas elas, vamos precisar identificar as que devem receber um tratamento diferenciado. Podemos identificar elementos usando classes ou ids. Se criarmos uma tabela com id="zebra", apenas uma tabela deste tipo poderá existir no documento; se criarmos várias tabelas com class="zebra", todas elas podem conviver pacificamente no mesmo documento. Para deixar o código mais flexível, vamos criar a classe dentro de um estilo:

Com esta folha de estilo definimos que as tabelas desta classe terão as bordas colapsadas (melhora o visual), que seus elementos th tenham letras brancas sobre fundo azul escuro e que seus elementos td (aninhados em elementos tr) tenham a margem inferior de 1 pixel também em azul. Teste seu script CSS e veja se o resultado é o mesmo que você está vendo ao lado.

Agora vem o pulo do gato com a jQuery. Vamos capturar todos os elementos tr de tabelas da classe zebra e adicionar uma classe a eles. Podemos chamá-la de alt, abreviação de alternado. Para que esta classe possa ser atribuída aos elementos desejados, ela também precisa ser definida no CSS: ... table.zebra tr td { border-bottom: 1px solid #95bce2; } tr.alt td { background: #ecf6fc; }

Tudo preparado, vamos fazer com que a jQuery comece a trabalhar para nós. Ainda dentro da área <head> da nossa página, logo abaixo da folha de estilo, adicione o seguinte script:

Se tudo funcionar como o previsto, até já sabemos o que deve acontecer: assim que o DOM estiver pronto, todos os elementos tr de todas as tabelas da classe zebra receberão a classe alt. Como esta classe já foi definida, sabemos que todas as linhas destas tabelas terão um fundo azul. Veja como ficou na tabela ao lado.

Peraí! Mas não é isto o que queremos. As linhas deveriam ter cores alternadas! Novamente é uma coisa fácil de resolver. Se você quiser que os tr das linhas pares sejam classificados, use even (par, em inglês); se quiser que isto aconteça com as linhas ímpares, use odd (ímpar em inglês). O código jQuery muda só um pouquinho e o resultado é o desejado

Mais algumas firulas

Se você entendeu o mecanismo da jQuery, garanto que está ficando mais fácil criar código. Minha sugestão é a de fazer com que as linhas mudem de cor quando o cursor do mouse estiver sobre elas - o tal de rollover. Para isto vamos adicionar mais duas funções:

Primeiro caçamos novamente todos os elementos tr das tabelas da classe zebra e adicionamos o evento mouseover (mouse sobre). Para quando este evento ocorrer criamos uma nova função que adiciona uma classe aos tr chamada over. A seguir, buscamos novamente todos os elementos tr das mesmas tabelas e adicionamos o evento mouseout (mouse fora). Novamente, quando este evento ocorrer, ele chama uma outra função que remove a classe anteriormente adicionada, ou seja, retira a classe over.

Observe uma nova particularidade. Ao invés de colocar dentro das novas funções uma chamada para $(".zebra tr"), usamos $(this). Em português, this significa este ou estes. Como as funções mouseover e mouseout foram aplicadas aos elementos obtidos com $(".zebra tr"), as funções aninhadas dentro destas funções não precisam buscar os mesmos elementos - podem referenciá-los com this porque estes elementos são herdados da função que as precederam. É claro que, se tivéssemos repetido $(".zebra tr") no lugar de $(this), o código iria funcionar da mesma forma. O mesmo não é válido para $(".zebra tr:even"). Se usássemos $(this:even) estaríamos aplicando a propriedade even ao objeto document, porque esta função está aninhada sob $(document). Aliás, nem pode funcionar porque o elemento document nem tem esta propriedade.

Ah! Não se esqueça de adicionar aos estilos o seguinte:

Pois bem, como é que fica a nossa nova tabela da classe zebra? Fica assim:

Otimizando o código jQuery

Já vimos que podemos usar $(this) porque a função herdou os elementos da função anterior. Se uma função herda os elementos da função anterior, então porque chamá-los novamente na segunda função (mouseout) que lida com os mesmos elementos? É aí que entra a mágica do encadeamento da jQuery. Enquanto os elementos forem os mesmos, podemos grudar uma função na outra! Podemos otimizar o código jQuery mostrado acima transformando-o no seguinte:

Agora me diz o que você prefere? O código HTML do início do tutorial ou este do final? Eu adorei reduzir o código (e não foi pouco) e partir para um Javascript mais avançado que faz uso do DOM - mais versátil, menos trabalhoso e pronto para uso em qualquer página que eu criar. Aliás, se você colocar o CSS num arquivo à parte, assim como o código jQuery, você pode incorporá-los em qualquer outra página e precisa lembrar apenas de adicionar class="zebra" nas tabelas em que quiser obter este efeito.

Valeu pessoal! Espero ter conseguido passar o recado.

E, como sempre, abraço da vó