Tag Archives: jQuery

Mascaras com jQuery Mask Plugin

Posted on by
39

Hoje é o lançamento oficial da versão 0.4.3 do meu plugin jQuery Mask Plugin. Como nunca falei sobre ele aqui no blog, vou ensinar vocês como utiliza-lo e algumas features bacanas do plugin.

Baixando o código

 wget https://github.com/igorescobar/jQuery-Mask-Plugin/blob/master/jquery.mask.min.js

A única coisa que vocês precisam fazer é incluir o plugin entre as tagsedo seu documento e pronto, o plugin está pronto para vocês utilizarem.

A sintaxe

A sintaxe do jQuery Mask Plugin é bem simples. Primeiro você passa o seletor, seguido de .mask e como parametro você vai passar a mascara que você quer que o campo tenha.
Exemplo

$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

Neste exemplo, todos os input fields que possuem a classe “.date”, a mascara será aplicada. No jQuery Mask Plugin você não tem mascaras pré-estabelecidas. Você escolhe a mascara como você quiser. no site do projeto vocês podem ver o jQuery Mask Plugin funcionando e mais alguns outros exemplos, como os a seguir:

$(document).ready(function(){
  $('.date').mask('11/11/1111');
  $('.time').mask('00:00:00');
  $('.date_time').mask('00/00/0000 00:00:00');
  $('.cep').mask('00000-000');
  $('.phone').mask('0000-0000');
  $('.phone_with_ddd').mask('(00) 0000-0000');
  $('.phone_us').mask('(000) 000-0000');
  $('.mixed').mask('AAA 000-S0S');
  $('.cpf').mask('000.000.000-00', {reverse: true});
  $('.money').mask('000.000.000.000.000,00', {reverse: true});
});

Veja que que eu posso definir o tipo de dado que o usuário pode imputar a cada dígito. Nesta máscara por exemplo:

$('.mixed').mask('AAA 000-S0S');

O usuário poderá digitar uma sequência de 3 caracteres alpha números, seguido de espaço, seguido de 3 caracteres números, seguido de traço, seguido de um caractere do tipo string, seguido de um caractere do tipo inteiro e seguido de um caractere do tipo string, legal, né?

Vocês podem definir a mascara como quiserem e também podem definir o tipo de dado que pode ser inputado em cada dígito da mascara.

Features

  • Lightweight (~2kb minified, ~1kb gziped).
  • Mascaras em qualquer elemento HTML.
  • suporte ao attribututo data-mask.
  • Mascaras com String/Numeros/Alpha-Numéricos/Mixed.
  • Suporte a mascara reversa para campos numéricos.
  • Sanitização.
  • Digitos Opcionais.
  • maxlength Automático.
  • Inicialização de mascara avançada.
  • Callbacks.
  • Mudança de mascara On-the-fly.
  • Remoção da mascara.
  • Customização.
  • Compatibilidade com Zepto.js

Mais sobre o jQuery Mask Plugin

  1. jQuery Mask Plugin no Github
  2. Página de demonstração
  3. Source-Code do jQuery Mask Plugin
  4. Todas as versões do jQuery Mask Plugin

Qualquer problema, por favor, me avisem.

AJUDOU? AJUDE NO DESENVOLVIMENTO DO JQUERY MASK PLUGIN

Click here to lend your support to: jQuery Mask Plugin and make a donation at pledgie.com !

Posts Relacionados:

Javascript – Aviso de Dados Não Salvos

Posted on by
3

Sabe quando você está escrevendo um e-mail e se você tenta sair de tela o browser te da um aviso, comunicando a possível perda de dados? pois é! sobre isso que vamos falar. :)  O Gmail faz isso, o Rally faz isso, mas muita gente ainda não sabe como isso é feito de fato.

Este tipo de recurso é muito interessante e pode evitar muita dor de cabeça por parte da pessoa que estiver utilizando o seu sistema. No meu caso, este recurso foi aplicado a um CMS. A finalidade da implantação deste recurso no CMS era para que os jornalistas fossem avisados quando algum dado no formulário fosse alterado, porém, o usuário intencionalmente (ou não) tenta mudar de página e este dado dado seria perdido. Se tratando de um CMS focado para jornalistas onde o conteúdo digitado é extremamente importante, todos recurso que for desenvolvido para evitar perda de conteúdo é extremamente bem-vindo.

onBeforeUnload Event

O evento onbeforeunload não tem uma finalidade exclusiva para ele, é um evento como outro qualquer, mas ele é invocado sempre que o usuário tenta sair da página atual, mas quando ele não está setado, simplesmente nada acontece. O evento responsável por pedir para que o usuário confirme ou não a mudança de pagina é o evento onbeforeunload. Sempre que ele é setado, você vai ver um confirm dialog, igual o da imagem abaixo.

Aviso de perda de conteúdo

O Problema

Se fosse só setar o efeito e ele fazia todo o resto, seria fácil, né? Pois é… mas não é assim (#lol). Temos que fazer um script peça a intervenção do usuário nas seguinte situações:

  1. Ao fechar aba/navegador.
  2. Ao clicar em qualquer outro link, senão o submit do formulário.
  3. O alerta deve aparecer somente se algo for alterado no formulário.

A Solução

$(function(){
  var formObject = $('.new_materia, .edit_materia');
  formObject.data('original_serialized_form', formObject.serialize());

  $(':submit').click(function() {
    window.onbeforeunload = null;
  });

  window.onbeforeunload = function() {
    if (formObject.data('original_serialized_form') !== formObject.serialize()) {
      return "As mudanças deste formulário não foram salvas. Saindo desta página, todas as mudanças serão perdidas.";
    }
  };
});

Como funciona?

  1. Utilizei o $.data() do jQuery por que eu não gosto de utilizar o var para declarar variáveis globais.
  2. Utilizei o $.serialize() do jQuery para serializar o formulário para comparar o estado do formulário no futuro. E foi a forma mais inteligente que encontrei para identificar se algo realmente foi mudado no formulário.
  3. Por default, eu seto o evento onbeforeunload e dentro dele eu verifico se algo foi mudado no formulário.
  4. O único caso em que eu tenho que remover o evento onbeforeunload é quando existe a intenção de salvar o dado, no caso utilizei o :submit com evento $.click() para remover o evento e cancelar o alerta, caso houve a intenção de salvar o formulário.
Bom, é isso!
Dúvidas, sugestões, comentários are extremely encouraged.

Posts Relacionados:

jGallery – A jQuery Plugin for Image Gallery’s

Posted on by
6

Olá Pessoal!

Mais um projeto pessoal. Com a oportunidade de um novo trabalho surgiu o jGallery. Um cliente me pediu um plugin parecido com o Lightbox, porém, ele queria que as fotos aparecessem logo abaixo, como uma galeria de fotos onde o usuário pudesse navegar entre as fotos sem sair da famosa “lightbox”. A partir desta necessidade surgiu o jGallery. Um plugin feito em jQuery para exibir de forma elegante uma galeria de fotos.

Características

  • Atalhos de teclado.
  • Se a imagem estourar a área útil do navegador a mesma é redimencionada de forma proporcional.
  • A galeria sempre se ajusta a sua resolução, inclusive a imagem (caso estoure a área útil).
  • Efeitos de transição.
  • Pre-loading de imagem.
  • Interface intuitiva e fácil de utilizar.
  • Compatibilidade com Internet Explorer, Chrome, Safari, Firefox e Opera (foi os que eu testei).

Código-Fonte

http://github.com/igorescobar/jGallery

Demo

http://igorescobar.com/projects/jGallery/

Sugestões

blog [at] igorescobar [dot] com

Posts Relacionados:

Tutorial jQuery – Método $.live();

Posted on by
7

Hoje vou falar sobre um método do jQuery muito útil, muito mesmo. Mais informações em inglês pode ser encontrada na documentação oficial do método .live().

O Problema

É muito comum quando estamos desenvolvendo aplicações para Internet e precisamos criar ferramentas tão dinâmicas que acabamos por utilizarmos quase todo o potencial que o JavaScript dispõe a oferecer. Nas ferramentas que desenvolvo é muito comum a interface da ferramenta ser controlada e alterada quase que o tempo todo através da manipulacão do DOM e muitas vezes precisamos atachar comportamentos em um determinado elemento da página.

Por exemplo: Temos um sistema de comentários onde todos os comentários são carregados e as respostas destes comentários aparecem como arvore.

  • Comentário 1
  • Comentário 2
    • Resposta do comentário 2
      • Resposta da resposta do comentário 2
  • Comentário 3

E assim vai…

Eu posso responder em tempo real um comentário e ele ja vai aparecer para mim. Tudo via jQuery. Quando fazemos uma varredura no DOM do documento usando os seletores do jQuery, procuramos por todos os botões que tenha a classe “responder” que originalmente ficam sem ação e depois, via jQuery damos ação ao elemento.

$('.responder').bind('click', function() {
  // instruções
});

Neste ponto, temos um problema. O indice de elementos do jQuery é estático, ele não atualiza automaticamente. Se um novo botão responder surgir na tela o jQuery não surtirá efeito sobre ele, pois ele apareceu DEPOIS da primeira varredura no DOM quando eu usei o seletor $(‘.responder’).

Solução

Para corrigir este problema, podemos utilizar o .live() do jQuery. Independente de quando e a quantidade de botões que surgirem na tela o jQuery irá acrescenta-lo em seu índice e você poderá manipula-lo da forma como quiser.

$('.responder').live('click', function() {
  // instruções
});

Caso queira adicionar ao DOM o mesmo comportamento em mais de um evento, basta fazer o seguinte:

$('.responder').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // faça isso
  } else {
    // faça aquilo
  }
});

Ou crie 2 lives separadamente para cada evento.

$('.responder').live('mouseover', function() {
  // instruções
});
$('.responder').live('mouseout', function() {
  // instruções
});

A princípio o conceito pode ser um pouco confuso. Fica difícil de entender isso quando nunca se passou pelo problema. O dia que algo não funcionar como o esperado pelo jQuery nem simplesmente ter sido chamado, lembre-se do $.live();

Igor
[]‘s

Posts Relacionados:

JavaScript não obstrutivo com JQuery

Posted on by
1

Apenas compartilhando com vocês um slide feito por Simon Willison no dia 6 de maio.

Unobtrusive JavaScript with jQuery

Posts Relacionados: