Detalhes

Categoria: Javascript

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

Autor: vovó Vicki

Acessos: 14534

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ó