Webpoint

Depois de ter mostrado o Ajax Form Plugin, como prometido irei falar neste post sobre o Plugin para jQuery Validate.

O que é o Validate?

O Validate é um plugin para o jQuery que permite que você possa centralizar todas as validações de dados no formulário, tanto no cliente como no servidor. Neste post irei falar sobre a validação no cliente somente.

Este é um dos plugins mais antigos e o mais completo na minha opinião. Você pode controlar todas as validações, mensagens e ainda ter a possibilidade de facilmente criar novos métodos de validação. Além de tudo, ele é integrado com o Ajax Form Plugin para que os dados enviados com sucesso seja enviado por Ajax.

Irei mostrar o funcionamento básico deste plugin na prática:

Exemplo do Validate

Neste exemplo, há um formulário com os campos nome, idade, e-mail e país. Esses campos não foram usados por acaso. O campo nome foi usado para mostrar como é simples a validação de campos que precisam ser preenchidos com algum valor. No campo idade irei ilustrar como criar um novo método para o Plugin, neste caso o usuário tem que ter mais de 18 anos. No campo e-mail irei mostrar como pode ser usado os métodos já definidos no plugin. O campo país mostra como validar selects, radios e checkboxes.

As mensagens de erro e como elas irão serem mostradas são totalmente personalizáveis, tanto onde e como elas irão aparecer tanto como no CSS. Por padrão, o plugin irá gerar um label logo depois do campo com a classe error. Isso pode ser modificado em suas configurações facilmente. Além do label, o input do elemento que não foi validado corretamente também irá ter uma classe error.

Vamos ao código HTML do formulário:

<form name="validate" id="validate" action="validate.html" method="post">

<label for="nome">Nome:</label>
<input type="text" name="nome" />

<label for="idade">Idade:</label>
<input type="text" name="idade" />

<label for="email">E-mail:</label>
<input type="text" name="email" />

<label for="pais">Pa&iacute;s:</label>
<select type="text" name="pais">
<option value="">Selecione</option>
<option value="brasil">Brasil</option>
<option value="canada">Inglaterra</option>
</select>

<input type="submit" value="Validar" />

</form>

Assim, o estilo da classe de erro ficaria:

label.error {
border: 1px solid red;
color: red;
font-weight: bold;
padding: 3px;
background-color: #99CCFF;
margin: 6px 0;
width: 120px;
text-align: center;
}

Note que foi passado o elemento label para estilizar somente a classe error aplicada a algum label e não o elemento input.

Depois de fazer o download do plugin, você poderá utilizar o seguinte código no head do documento abaixo do arquivo referente ao core do jQuery:

$(function(){

$("#validate").validate({

submitHandler: function(form) {
$(form).submit(function(){
alert('todos os dados foram preenchidos corretamente');
return false

});
},
rules: {
nome: 'required',
idade: {
required: true,
minAge: 18
},
email: {
required: true,
email: true
},
pais: 'required'
},
messages: {
nome: 'Você não preencheu seu nome',
idade: {
required: 'Você não preencheu sua idade',
},
email: {
required: 'Você precisa preencher um e-mail',
email: 'Endereço de e-mail não válido'
},
pais: 'Você precisa escolher um país'
}

});

});

Irei explicar passo a passo o código:

Primeiro, você passa um seletor para referenciar um formulário(neste caso o id do formulário) e executa o método validate, que aceita um objeto de parâmetros:

• submitHandler: esta opção irá especificar o comportamento do formulário quando a validação passar com sucesso. Aqui é onde o plugin pode ser integrado com o Ajax Form plugin, o parâmetro form é a referência do formulário passado no seletor do jQuery.
• rules: Este é o objeto de regras de validação. Cada item deste objeto refere-se ao name do formulário. Se o formulário apenas não pode ser vazio, você pode passar uma string 'required', caso contrário você tem que especificar dentro deste campo todas as regras de validação, que seria um novo objeto. O campo nome e país neste caso apenas não pode ser vazio, enquanto que os demais possui outras regras.
• messages: da mesma forma que o rules, mas com especificação de qual mensagem será exibida quando a validação não passar. Cada método possui mensagens pré-definidas que estão em inglês, você pode especificar qualquer mensagem aqui ou alterar o código fonte dos métodos de validação para aparecer mensagens padrões.

No caso da regra minAge eu criei um novo método de validação:

jQuery.validator.addMethod("minAge", function(value, element, params) {
return this.optional(element) || value > params;
}, "Você precisa ter mais de 18 anos.");

Esta é a sintaxe para criação de novos métodos para o Validate. Primeiro você atribui um nome para o método (para ser usado dentro do objeto rule) e passa uma função que retorna um valor Booleano para verificar se a validação confere. O primeiro parâmetro é o valor digitado ou escolhido pelo usuário(no caso do input, o valor digitado e do select, o valor escolhido). O segundo parâmetro é o elemento que está sendo validado (Elemento DOM) e o terceiro é o parâmetro passado na regra de validação. No caso da validação de idade, o primeiro parâmetro é a idade que o usuário digitou, o segundo é o input e o terceiro é o valor inserido na regra. Sendo assim ele verifica primeiro se o parâmetro é opcional, por que caso seja, ele não precisa validar e o segundo verifica se o valor digitado é maior que o valor atribuido na regra (você pode, por exemplo, colocar na regra que a idade seja maior que 21).

O ideal é colocar todas as regras de validação personalizadas em um arquivo javascript separado e inserir logo depois do plugin Validate.

Com a validação de selects, checkboxes e radio buttons é possível trabalhar da mesma forma que um input. No caso do select, o value colocado para o option "Selecione um país " é vazio, sendo assim ele não irá passar com sucesso na validação.

Espero que tenha ajudado a todos e não se esqueçam de olharem a documentação, experimentar e colocar em prática para descobrir todas as funcionalidades do Plugin.

Explorando mais a fundo as possibilidades de de usar o Firebug com o jQuery, encontrei o jQuerify.

Como havia mostrado no post Usando o Firebug com o jQuery, é possível pelo console do firebug executar comandos Javascript. Se o jQuery estiver na página que você deseja debugar, você pode usar todas as suas funcionalidades para navegar no documento através do Firebug. Mas e se o site for o Google? Se você deseja debugar em outros sites, ou até treinar o poder dos seletores do jQuery, existe o jQuerify.

Esta ferramenta nada mais é que um link que executa um javascript on the fly para inserir no documento atual uma tag script para carregar o jQuery e torná-lo disponível para ser utilizado no console do Firebug.

Executar jQuerify

Se você carregar o link acima para o seu favoritos, ou até mesmo copiar o link e colar no navegador quando estiver em qualquer página, você pode usá-lo para deixar o jQuery disponível e usar a vontade no console do Firebug.

Vale lembrar que as modificações da página são feitas localmente (com a página no cache) e não terá efeito se a página for recarregada, então para cada página aberta você tem que executar o link. O próprio código exibe uma mensagem de que foi inserido o jQuery com sucesso.

Abaixo vai um exemplo usado no site do Google:

Para utilizar este método, apenas arraste este link para o seu favoritos, e execute no console do firebug qualquer comando jQuery.

O Firebug salva o desenvolvedor Web. Isto não tenha dúvida. Além de suas várias utilidades, tanto para o HTML / CSS, tanto para o Javascript. Neste último ele deixa disponível em seu console todas as variáveis e funções para serem acessadas.

Sendo assim, se você usa o jQuery em sua página, você pode usar o console do Firebug para executar métodos do jQuery. Como assim? A figura abaixo ilustra esta ferramenta:

Como você pode ver, eu digitei no console o seletor $('.doc') que retornou um array com todos os elementos retornados pelo jQuery. Depois disto mandei retornar o primeiro elemento através da sintaxe $('h3').get(0). O firebug logo abaixo retorna o primeiro elemento da página atual. Mas ele vai mais além...

Como você pode ver abaixo, ele linka o elemento retornado a aba HTML e mostra o elemento no contexto da página inteira:

Assim, você pode ter um controle e debugar o seu código muito mais facilmente.

O que acontece se você executar o seletor abaixo no firebug?

Este seletor irá retornar como previsto o primeiro parágrafo ligando ao documento atual.

Além de tudo, você pode modificar o dom utilizando o método $('seletor').html('conteudo'). As possibilidades são várias, depende da necessidade. Então não hesite em explorar esta ferramenta.

Espero que tenha sido útil para todos. Um abraço e até o próximo post.

Este plugin tem por objetivo acessar uma query string anexada numa url similar a maneira feita pelo GET em uma linguagem de servidor

Como usá-lo?

//url: http://www.alexandremagno.net/jquery/plugins/jget/
//?test=var&test2=var2
 
var save1 = $.jget['test'];
 
alert(save1);
 
//imprime 'var'
 
var save2 = $.jget['test2'];
 
alert(save2);
 
//imprime 'var2'

Plugin no site do jQuery

http://plugins.jquery.com/project/jget

Download

http://plugins.jquery.com/files/jquery.jget_3.zip

Página de exemplo

http://www.alexandremagno.net/jquery/plugins/jget

Você pode anexar uma query string e se estiver usando o Firefox com o firebug, poderá ver no console as variáveis anexadas. Exemplo: http://www.alexandremagno.net/jquery/plugins/jget/?test=jgetplugin

Autor

Alexandre Magno

Licença

MIT - http://www.opensource.org/licenses/mit-license.php

Pessoal, tomei a iniciativa de criar um local para todos que desenvolvem plugins aqui no Brasil publicarem.

O endereço é: http://code.google.com/p/jquerydevbrazil/

A idéia é manter um local acessível para o mundo, para compartilhar os plugins e manter a sua documentação original. O autor do plugin poderá manter uma documentação em português em seu blog, mas ter uma documentação em inglês no site do projeto. Através do SVN, o Google code permite um controle de código e edição em equipe. Assim, com o seu plugin plubicado neste local, ele poderá ser melhorado por outros integrantes.

Se quiser fazer parte deste projeto, basta entrar em contato, possuir algum plugin, ter conhecimento sobre SVN, ter uma conta no Google que eu irei enviar o convite.

Com isto, você será orientado de  como será os padrões para publicação.

Não tenho intenção nenhuma de tomar crédito pelos plugins criados pelos colaboradores que se interessarem, esta é apenas uma maneira de centralizar o desenvolvimento e criar um trabalho em equipe para podermos melhorar o que já foi criado da maneira mais prática e moderna.

Desta maneira também, o desenvolvedor pode ter seu plugin em português, mas ter uma referência global para outros que desejarem acessá-los.

Neste local também os membros poderam fazer uma inspeção maior e relatar erros e idéias de novos plugins.

Espalhem a idéia e vamos criar extensões para facilitar o nosso dia-a-dia e consequentemente da nossa equipe e vice-versa.

No site do projeto tem uma idéia de como funciona, pois nele eu publiquei um plugin para centralizar elementos.

E ai pessoal,

Gostaria de informar que agora faço parte da equipe do jQuery para desenvolvimento de plugins e melhoria da Framework e em breve irei publicar os plugins no site do jQuery . Aqui no Blog permanecerá uma documentação em português e no site de plugins do jQuery a documentação original em inglês, para todos poderem usufruírem.

Obrigado a todos que me ajudaram e espero poder continuar passando algo de bom para todos que desejam aprender e se aperfeiçoarem nesta framework.

Só recapitulando. Para quem não sabe, o jQuery é uma framework/biblioteca de javascript para facilitar o desenvolvimento web, principalmente nesta nova era de Ajax e Web 2.0. Ela possui ferramentas para trabalhar com manipulação do DOM, CSS, XML, Ajax e efeitos. Uma das suas grandes vantagens em relação às outras é a possibilidade de facilmente extendê-la, podendo manter "limpa" o seu código original e usar os plugins de acordo com a demanda.

Qualquer projeto reusável pode ser pensado como uma extensão do jQuery e tudo pode ser feito em termos de plugin, facilitando a reutilização do código e a sua manutenção.

Todos os plugins são livres e contém uma documentação de como são usados e ainda servem de lição para quem quer começar a desenvolvê-los. Mas para isto precisa saber e se aprofundar no javascript, que apesar dos pesares e da briga eterna de browsers, ela pode ser uma linguagem amiga e não uma inimiga do desenvolvimento. E o jQuery é a maior prova de que esta linguagem polêmica pode dar bons frutos.

Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({
 
    horizontal: false // somente vertical
 
});
 
$("class_or_id").center({
 
vertical: false //somente horizontal
 
});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2+

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

http://www.alexandremagno.net/jquery/plugins/center

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno - http://www.alexandremagno.net

Licença

http://www.opensource.org/licenses/mit-license.php

Para os usuários, tanto faz. Para os desenvolvedores o medo de ter mais um browser para ser testado e consequentemente, mais dor de cabeça.

Os usuários pouco se importam para novas versões do IE, pois estes geralmente utilizam o que estiver instalado no sistema operacional. Quem usa outros browsers geralmente teve o trabalho de procurar por sua instalação. Esta iniciativa demonstra o mínimo de conhecimento que muitos usuários não possuem.

Já os desenvolvedores Web, lançamento de um novo browser pela Microsoft não é uma notícia animadora.

Mais uma vez, foram relatados vários bugs de segurança e de interpretação do javascript e CSS. Ainda é cedo para dizer, pois estão na versão beta, mas já dá para prever o que acontecerá.

ler artigo completo

Originalmente escrito por Mike Alsup no blog Learning jQuery

Eu tenho desenvolvido plugins do jQuery por um tempo e me acostumei com um estilo bastante particular de desenvolver plugins para meus scripts. Este artigo pretende compartilhar o padrão de desenvolvimento que eu achei extremamente útil para a autoria de plugins. Ela parte do pressuposto que você já tenha conhecimento do desenvolvimento de plugins para jQuery. Se você um autor de plugin novato, por favor leia o Guia de autoria de plugins do jQuery (inglês, por enquanto )

Há poucos requerimentos que eu acho fazer um plugin se comportar bem:

• Dê somente um nome no namespace do jQuery
• Aceite um argumento de opções para controlar o comportamento do plugin
• Provê acesso público para configurações de plugin padrões
• Provê acesso público para funções secundárias (quando possível)
• Mantenha funções privadas privadas

Eu analisei esses requerimentos um a um, e trabalhei em cima dele para construir um simples plugin que pisca o texto.

ler artigo completo

Vou falar neste post sobre um plugin para jQuery que deve ser aprendido como parte de sua documentação: o jQuery form plugin

Ele é muito útil para enviar formulário usando ajax, além de controlar a validação client-side de maneira triunfante. Se você não tem idéia de como usar o jQuery para pegar os valores do formulário de uma maneira fácil para ser passado pelo método $.post do jQuery, ou usa o método value() para fazer isto, depois deste plugin você vai fazer isto de uma maneira muito mais eficiente.

Exemplo ilustrativo

Para vocês entenderem o que estou falando, acessem este link: http://www.alexandremagno.net/portfolio_dev/site/contato. Tentem enviar o formulário sem preencher nenhum campo, ou deixando campos vazios e e-mail incorretos. O formulário fez a validação de uma maneira bonita, simples e intuitiva. Isto pode ser totalmente configurado para o plugin, a imaginação é o limite .

Preencha corretamente o formulário e envie(aproveite e deixe uma mensagem para mim ). Ele foi enviado usando ajax, com todos os campos passados para o jQuery, processados pelo php, retornado pelo XML e devolvido ao usuário. Tudo feito pelo plugin. Tentem enviar também sem preencher algum campo ou digitar um e-mail não válido, ele irá mostrar uma validação eficiente e personalizável.

ler artigo completo