Javascript

Para quem ainda não trabalhou com envio de formulários através do jQuery, ensinarei nesse artigo uma das maneiras para que isso seja feito.

Utilizarei uma função nativa do próprio jQuery para essa finalidade a jQuery.post

Basicamente essa função recebe 4 parâmetros:
jQuery.post( url [, data ] [, success ] [, dataType ] )

1 - url: o endereço para o qual desejamos enviar os dados do formulário. Normalmente esse é o endereço de um script PHP que tratará os dados enviados e salvará no banco de dados ou enviará os dados por email.

O desenvolvimento de um menu dropdown com jQuery se resume em três etapas: criar o menu HTML; estilizar com CSS e por fim, colocar os efeitos com jQuery.

Neste exemplo vou utilizar os eventos mouseover e mouseleave.

Mouseover ocorre quando passamos o mouse sobre o elemento HTML.

Mouseleave ocorre quando retiramos o mouse do elemento.

Conforme citei em um artigo anterior, mostrarei aqui como pegar o valor de dois inputs para cálculo de média. Mostrarei em um terceiro input o resultado da média.

A primeira a coisa a se fazer é criar um formulário com três inputs e um botão. No terceiro input, que irá mostrar apenas o resultado, podemos colocar o atributo “readonly”.

Em muitas situações precisamos pegar o valor de um campo input, seja para fazer algum cálculo matemático ou mesmo para transferir o conteúdo do input para outro local.

Neste artigo mostro como fazer isso utilizando jQuery.

Para este tutorial será necessário a chamada da biblioteca jQuery no cabeçalho da página, se ainda não está familiarizado, veja o artigo jQuery - O básico dos básicos.

Com tantos banners espalhados por um site, tudo que buscamos é um plugin que personalize nossas imagens sem ser muito chamativo. Assim é o plugin imgCaption. Existem vários plugins jquery pela internet que facilita a personalização de imagens em um site. Porém dentre todos, nenhum era exatamente o que eu precisava. Foi aí que decidi que ao invés de usar algum plugin jquery pronto, que não atendia meus objetivos, iria criar um simples que atendesse exatamente o que precisava. Então o plugin imgCaption é justamente isso; apenas um plugin simples que põe uma descrição personalizada em uma imagem. E o melhor, com apenas uma chamada ao plugin você poderá personalizar todas as descrições de todas as imagens. Consulte a página do imgCaption e utilize-o em seus projetos. Se você é desenvolvedor e está disposto a ajudar com este pequeno projeto, disponibilizei uma área para que possam contribuir com melhorias. jQuery facilitou muito minha vida de programador, por isso este plugin está sendo disponibilizado. Para que possa facilitar a vida de outros programadores.

Como citado no artigo anterior sobre o básico do jQuery, onde falei da possibilidade de mudança de background utilizando jQuery, neste artigo demonstro este efeito. Veja o exemplo funcionando antes de prosseguir. A primeira coisa a fazer é colorir o background da div com o CSS. Supondo que a div tenha um id = "box", o CSS inicial seria este: <style type="text/css"> #box { background:#ccc; width:300px; height:200px; } </style> Com um background pré-definido com CSS, podemos então criar o código jQuery para mudar esse background. Se você ainda não está familiarizado com o código abaixo, então não deixe de ver o artigo sobre o básico do jQuery. <script type="text/javascript">$(document).ready(function(){ /* ao clicar na div com id="box" executa a função */ $("#box").click(function(){ /* a função muda o background da div com id="box" */ $("#box").css("background","#f00"); }); });</script> Não deixem de ler os comentários dentro do código. Utilizamos o evento click() do jQuery para este efeito e passamos como parâmetro para este evento uma função. Então ao clicar na div com id="box", a função ...

O jQuery tem uma estrutura básica e padrão. Mas apesar de padronizada, é sempre bom saber o porquê de cada parte dessa estrutura...

O básico dos básicos em códigos jquery, em outras palavras, seria o esqueleto essencial para fazer funcionar todos os scripts em jquery.

A primeira coisa a fazer é baixar os arquivos da biblioteca jQuery no site oficial, e note os tipos de arquivos disponíveis:

Production: é um arquivo compactado, ideal para usar em projetos, pois por ser compactado o seu tamanho em kilobytes é reduzido.

Development: não muito recomendado em projetos, mas ideal para os desenvolvedores que gostam de analisar o código da biblioteca jQuery.

Com certeza jQuery facilitou a vida de muitos desenvolvedores de websites, ainda mais para tratamento de formulários, removendo a velha necessidade de misturar o html com javascript.

Antes mesmo de prosseguir veja um exemplo do resultado dos scripts deste artigo. Certamente um resultado ótimo para melhoria da acessibilidade.

Esqueça todo aquele martírio que existia para tratar formulários com javascript, agora basta algumas linha de código e você terá excelentes efeitos.

Pretendo apresentar mais artigos com efeitos prontos para formulários em jquery e este é o primeiro da série.

Vamos aos códigos :