jQuery e suas mágicas para uso diário

Bom pessoal, acho que já deu para perceber como eu gosto de jQuery, então vou mostrar como fiz um brincadeira simples e útil.

Quem nunca necessitou de mostrar um descrição de um campo em um formulário, como a imagem abaixo, então vou dar um exemplo que não levou mais de cinco minutos e ficou muito fácil de usar.

Imagem tirada do desevolvimento do CriandoRPG

Imagem tirada do desevolvimento do CriandoRPG

A um bom tempo eu faço meus formulários com listas (é UL e LI mesmo) seguindo o seguinte modelo:

Estrutura básica para formulários

Estrutura básica para formulários

Bom, para conseguir a descrição tive que adicionar um pequeno item no html, que assim tenhamos lugar para colocar a descrição do campo, então a nova estrutura ficou assim:

Formulário com descrição

Formulário com descrição

Bom, mas como nem só de Html é feito o mundo, abaixo segue o css, mas prestem atenção a um fato, o position está colocado como absolute e esse é um detalhe muito importante, é por essa fato que quando colocamos o margin-left a descrição fica ao lado da caixa de texto, e por cima do conteúdo da direita se houver.

Código CSS

Código CSS

Vamos agora para o código do jQuery, vou explicar com muitos detalhes, para que nada passe em branco.

JQuery

JQuery

Vamos lá, é bom se acostumar com o fato de jQuery trabalhar com funções como parâmetro, é estranho no começo. Vamos a explicação:

  • A linha 1 serve para que esse código seja carregado sempre quando uma página inicia sua execução, por isso o parâmetro para o jQuery é document.
  • Na linha 3 é usado um parâmetro usando uma notação CSS que diz o seguinte. Para cada LI, que está dentro de cada UL com o atributo classe com valor igual a formulario.
  • Ainda na linha é usado uma função chamada EACH, que vai executar o trecho de código dentro dela, para cara item encontrado, baseada na expressão CSS.
  • Na linha 5, estamos definindo que no mouse ouver vai acontecer algo.
  • Na linha 6, estamos buscando algum elemento que tenha a CLASSE igual a DESCRIPTION, e estamos exibindo esse elemento.
  • nas linhas 8 e 9 estamos dando continuidade ao comportamento, definindo que no MOUSEOUT o elemento que a CLASSE igual a DESCRIPTION vai ficar escondido.

Bom pessoal, acho que dessa fez foi um artigo grande… rsrsrs

Espero o retorno de vocês, se gostarem prometo que escrevo mais sobre jQuery e suas mágicas para uso diário.

até depois, Rafael Martins.


2 Comentários on “jQuery e suas mágicas para uso diário”

  1. Daniel Teixeira disse:

    Me amarrei no exemplo. Achei bom para mim que ainda não conheço nada de jquery. Dá pra ter uma idéia de como começar com a parada.

  2. rafaelmws disse:

    vlw Daniel.

    O próximo post que vou fazer vai ser exatamente pedindo para que as pessoas me mandem exemplos de coisas que elas gostariam de ver como se faz em jQuery, para que possa fazer um pequeno tutorial.

    abs – Rafael.


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s