Webpoint

Desculpem a demora para escrever outro Post. Estava de viagem para a minha terra natal e lá o acesso a internet é literalmente remoto.

Vou mostrar mais um simples efeito com o Jquery. Está vendo o campo de busca acima? Percebeu que quando você clica no campo a borda muda de cor e ao retirar o mouse a borda volta ao normal? Estes dois eventos correspondem ao focus e blur do Javascript respectivamente. Se não fosse o digníssimo IE6, como mostrei em posts anteriores com a pseudo-classe hover, seria possível conseguir este efeito totalmente por CSS, mas o IE6 não suporta e ele ainda é o mais usado.

Graças ao Jquery, este efeito pode ser conseguido facilmente e mais uma vez sem precisar inserir eventos no HTML.

Para começar, não esqueça de inserir a framework no head do documento. Isto foi falado nos posts anteriores.

Vamos ao código do efeito:

// focus nos campos
$('.campo').focus(function(){
 
  $(this).toggleClass('campo_focus');
 
});
 
$('.campo').blur(function(){
 
$(this).toggleClass('campo_focus');
 
});

Com o código acima, todos os campos com a classe campo mudará sua classe para a classe campo_focus quando o evento focus for acionado e irá retirar a classe campo_focus quando o evento blur for acionado. Relebrando o toggleClass, que já foi falado no post Hover em tabelas com o Jquery, ele adiciona a classe se ela não estiver presente, e elimina a classe se ela estiver presente. Ou seja, alterna a classe. Ela não funcionou bem para hover em tabelas, sendo necessário mudar para outro método. Mas aqui foi testado no IE6, IE7, Fiferox 2.xx e Opera 9 e funcionou perfeitamente.

Abaixo o CSS da classe campo_focus:

.campo_focus {
   border: 1px solid red;
}

Ele apenas muda a borda para vermelho.

O mesmo raciocínio pode ser aplicado para botões input. No botão de buscar acima ele muda de classe quando o usuário passa o mouse por cima e volta para a classe original quando o usuário retira o mouse. Simplesmente foi adicionado o evento hover neste campo com o toggleClass. Quer experimentar?

Artigos relacionados

• FAQ Dropdown com o Jquery
• Ajax com o Jquery
• Hover em tabelas com o Jquery