Plugin para customização de formulários

Como postei anteriormente estou desenvolvendo uma nova versão do Livro de oração, e nisso fui obrigado a desenvolver uma série de plugins para jquery para customização de formulários. Todos sabem da minha paixão pelo mundo open source, logo, estou disponibilizando aqui uma versão beta do plugin, acredito que há muito o que melhorar e tenho certeza que até o fim do meu projeto ele estará bem melhor, mas vamos a uma prévia:

JS: http://goo.gl/ueKw2
CSS: http://goo.gl/76cxn


O plugin é dependente do masked input que pode ser obtido aqui:

http://digitalbush.com/projects/masked-input-plugin/

Segue uma pequena demostração de como usa-lo:

$("seletor").inputCustom({
    opção : "valor"
});

Segue a lista de opções:

label 
Descrição: Texto padrão do campo, desaparece no evento focus
Padrão: ""


datatype
Descrição: Tipo de dado [text/url/email/number]
Padrão: text


required
Descrição: Seta campo camo obrigatório ou não
Padrão: false


disable
Descrição: Checa se campo pode estar desativado 
Padrão: false


minlength
Descrição: Tamanho mínimo em caractéres do texto, em caso de número valor mínimo do número
Padrão: 1

maxlength
Descrição: Tamanho máximo em caractéres do texto, em caso de número valor máximo do número
Padrão: 10000

errorMsg
Descrição: Mensagem de erro caso campo não for corretamente preenchido
Padrão: 'Preencha o campo corretamente!'

errorClass
Descrição: Classe que será aplicada ao elemento caso não esteja corretamente preenchido
Padrão: 'errorField'

labelClass
Descrição: Classe para quando o elemento esteja no texto padrão (label)
Padrão: 'labelActive'

mask
Descrição: Máscara que será aplicada ao elemento (ex.: 99/99/9999), para maiores informações pesquisar o site no maskedinput
Padrão: ""

autoComplete
Descrição: Url onde será recebido o JSON usado para o auto complete: (ex.: { "city_5137":"Ribeirão Pires","city_5138":"Ribeirão Preto"})
Padrão:

click
Descrição: Evento click do elemento
Padrão: function(){}

focus
Descrição: Evento focus do elemento
Padrão: function(){}

focusout
Descrição: Evento focusout do elemento
Padrão: function(){}

keydown
Descrição: Evento keydown do elemento
Padrão: function(){}

keyup
Descrição: Evento keyup do elemento
Padrão: function(){}


Exemplo básico:


$(document).ready(function(){
  $("input[name=nome]").inputCustom({
    label: "Nome: ",
    required: true,
    minlength: 3,
    maxlength: 150,
    errorMsg: "Preencha o campo nome"
});

  $("input[name=email]").inputCustom({
    label: "Email: ",
    required: true,
    datatype: "email",
    errorMsg: "Preencha o campo email!"
  });

  $("input[name=url]").inputCustom({
    label: "Site: ",
    required: true,
    datatype: "url",
    errorMsg: "Preencha o campo URL"
  });
});




Por hoje é só, se possível amanhã estarei falando um pouco mais sobre o plugin.


Nenhum comentário: