Pinceladas da Web

Para criar máscaras com jQuery, iremos usar o plugin Masked Input, com apenas uma linha de código podemos criar qualquer tipo de máscara.

Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.

Agora vamos criar as máscaras que precisamos.

jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);

Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.

Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.

<input type="text" name="fone1" class="mask-fone" />
<input type="text" name="fone2" class="mask-fone" />
<input type="text" name="rg" class="mask-rg" />
<input type="text" name="cpf" class="mask-fpc" />

E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.

Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.

Se você já trabalhou com os efeitos de fadeIn & fadeOut da biblioteca jQuery já deve ter reparado que os elementos em que esses efeitos são aplicados (No Internet Explorer), principalmente textos, ficam com as fontes pixeladas, em algumas situações chegando a acontecer de o texto ficar em negrito e após a execução do efeito ele voltar ao normal. Se tratando de Internet Explorer, nem a Microsoft sabe o por que disso acontecer.

Já tive vários problemas desse tipo e até então não havia encontrado a solução, mas acabei encontrado uma solução muito interessante no site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o fade.

Acessem esse exemplo com o Internet Explorer e vejam o erro acontecer. Provavelmente esse erro acontece com outras bibliotecas JavaScript, portanto, fica aí a solução.

[Update]Encontrei aqui uma outra solução muito interessante.[/Update]

Encontrar hoje uma boa Usabilidade em formulários está ficando cada vez mais difícil. Muitas vezes são criados formulários com muitos campos que se forem analisados metades deles não seriam usadas para nada, só estão ali para “tapar buracos”. Em outras situações os campos são extensos demais, ou pequenos demais, atrapalhando a boa legibilidade do que você está preenchendo.

O que devemos fazer em situações como essa? Arrancar os cabelos? Não se preocupe, vou mostrar aqui uma boa solução que encontrei no site Webtoolkit4.me, para aqueles campos de formulários onde eles são muito pequenos e o texto que você precisa digitar é muito grande (É o que mais acontece hoje em dia).

Observem a seguinte marcação HTML:

<form id="aform">
  <label for="type">Descrição longa:</label>
  <input name="type" type="text" id="type" size="20" />
  <div id="info"></div>
</form>

Como podem ver, um simples formulário com um campo label e um campo input, e uma div extra chamada info, onde sua função será de que ao digitar o texto no campo input e o mesmo o exceder, o texto irá aparecer por completo dentro dessa div info. Para fazer isso vamos utilizar a biblioteca jQuery:

$(document).ready(function(){
// Definimos aqui que por enquanto a div id="info" não deve aparecer.
$('#info').hide();
// Pegamos o tamanho do campo input texto
var size  =  $('#type').attr("size");
// Vamos fazer alguma coisa quando começar a digitar.
$('#type').keyup(
function(){
// Tudo que for digitado sera armazenado em uma variável
var entry = $(this).attr("value");
// O tamanho dela.
var current_length = $(this).attr("value").length;
// Se o nosso texto é maior que o campo input
// ele é mostrado na div id="info".
if (current_length>= size) {
$('#info').html("<strong>Você digitou até agora:</strong> " + entry);
$('#info').show('fast');
}
// Caso contrário ela fica oculta.
else $('#info').hide('fast');
});
});

Uma solução muito interessante, vejam o script em ação nesse exemplo.

Se você tem a vontade de inserir em seu site os posts do Twitter, saiba que pode fazer isso facilmente com jQuery, com o plugin desenvolvido por Damien du toit. Com ele você vai inserir de uma forma customizável e não obstrutiva em seu site seus últimos posts do Twitter.

De início, você deve efetuar o download do plugin e inserir em seu site os seguintes códigos dentro da tag <head>, além do Framework jQuery:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Após basta adicionar uma div em seu site com o id=”twitter”:

<div id="twitter"></div>

Depois é só definir as configurações de inicialização do plugin:

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

Vejam o demo em funcionamento.

No dia 14 de janeiro de 2006 John Resig apresentou ao mundo a sua mais nova criação, a biblioteca de desenvolvimento JavaScript jQuery, que foi criada com o intuito de tornar a vida do desenvolvedor mais fácil, escrevendo menos código e em consequência produzindo mais.

De lá pra cá a popularidade da biblioteca cresceu muito devido a sua facilidade de uso, a partir de agora qualquer um pode desenvolver complexos efeitos em JavaScript com pouquíssimas linhas de código. Até a Microsoft agora vai adicionar a jQuery ao Visual Studio, alguém mais duvida da sua popularidade?

E documentação? Sim, você pode encontrar na web uma vasta documentação sobre a biblioteca, muitas referências em Inglês, alguns livros, boas referências em Português também, mas ainda faltava alguma coisa. Foi pensando nisso que o Maujor anunciou hoje que estará lançando um livro sobre a Biblioteca jQuery, então, portanto, será o primeiro livro em Português sobre o assunto. Ele já era o “Dinossauro das CSS”, lançou seu primeiro livro sobre CSS, depois lançou o livro sobre HTML e agora vai lançar o livro sobre jQuery, com certeza essa foi uma boa notícia para a comunidade desenvolvedora. Meus parabéns Maurício.