jQuery para uso diário – O que vocês querem ver ?

Olá pessoal, tudo blz ?

Minha idéia é a seguinte:

Vou deixar esse post para vocês possam dizer o que vocês querem, exemplos, de como pode se usar jQuery.
Coisas do tipo, quero ver um pop-up igual ao do site tal ou o efeito igual al site do fulano, na medida do possivel eu faço o tutorial e coloco aqui.

Só espero que essa idéia de certo.

vlw galera, abs – Rafael

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

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

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

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

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

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.