11/03/2010 - 01:49
É muito comum em aplicações sejam web ou não que alguns campos como telefone, por exemplo, tenham que ter um formato padrão. [(99) 9999-9999]. O difícil é conseguir com que o usuário que acessa essa aplicação digite da maneira correa e não [(999) 99999999], por exemplo.
Recentemente ao desenvolvermos um widget, aqui no iG, no deparamos com a mesma situação, no caso era valor. Em uma busca na net encontramos um plugin para jQuery que faz isso de maneira bem fácil.
Na página do plugin é possível baixar o arquivo que deve ser incluído no código logo abaixo do arquivo de inclusão do jquery.
Algo mais ou menos assim:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
Depois vem a mágica.
[/sourcecode]
$(function($){
$(“#date”).mask(“99/99/9999″);
});
[/sorcecode]
Permite apenas números e o formato será 99/99/9999. Simple viu?
Aí você pode uisar com data, hora, valor, etc…
O “9″ representa número, se usar “a” representará letra, se usar “*” representara caracter.
Simples, fácil e objetivo.
Para usar valore, no entanto, pode não ser o ideal uma vez que se digita da esquerda pra direita o que obriga a digitar todos os valores.
Enviado por: Leandro Garcia - Categoria(s): Frameworks, jquery, plugin
Tags relacionadas:
22/12/2009 - 21:40
jQuery é, muito provavelmente, o framework para Javascript mais utilizado no mundo.
Anteriormente eu comentei o que era um framework. Neste vou comentar sobre o jQuery.
O jQuery é uma mão na roda em se tratando de desenvolver qualquer solução para ambiente Web que necessite de interações do lado do cliente.
Uma das maiores vantagens do jQuery é a limpeza/simplicidade do código, pois com muito poucos comandos conseguimos elaborar interações melhor desenovolvidas.
Com o jquery é muito mais fácil trabalhar com eventos como o “click” do que da maneira “tradicional”, pois para se trabalhar com eventos se era necessário implementar diversos comando que acabavam por tornar o código mais pesado e muitas vezes até defícil de se entender e dar manutenção, já com o jQuery, a simples implementação da função “.click” no seu código carregado junto com a página é o suficiente.
O desnvolvimento como jQuery torna o código mais simples e intuitivo.
O Ato de selecionar determinado elemento de uma página é muito mais fácil. O que antes era necessário nettar o id para o elemento e depois utilizar o “document.getElementById(‘id’)”, com o jQuery basta usar o “$(‘#id’)” e funciona da mesma maneira. No javascript não existe um “document.getElementByClass”, o que seria de enorme utilidade para qualquer desenvolvedor, mas no jQuery há. E de maneira muito simples, “$(‘.class’)”, com isso você consegue selecionar todos elementos que tenham a classe “.class” e à partir disso, fazer o que for necessário.
Abaixo vou escrever um código que muda a cor de todos os elementos que tenham a classe “cor”. A Cor inicial será preta.
.cor{color:#000} //Preto
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
$(document).ready(function(){
$(".cor").css("color","#ff0000");
});
Explicação:
$(document).ready(function(){ -> Ao final do carregamento da página
$(“.cor”).css(“color”,”#ff0000″); -> Selecionar todos os elementos com a clarr cor, no caso o primeiro, terceiro, quarto e sexto itens da lista e alterar a cor para vermelho.
Esse código pode ser alterado da maneira que mais lhe convier, por exemplo, você quer ter certeza de que apenas os itens de uma lista com a classe cor seja alterados e não os demais, basta incluir o elemento.
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
<p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("li.cor").css("color","#ff0000");
});
</script>
Agora se você quer garantir que apenas os itens de uma lista não ordenada mudem de cor:
<ol>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ol>
<ul>
<li>primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
<p>Paragrafo</p>
<script type="text/javascript">
$(document).ready(function(){
$("ul li.cor").css("color","#ff0000");
});
</script>
E assim por diante.
Vou escrever uma série de tutoriais para se dar os primeiros passos com jQuery, mas enquanto isso, você pode acessar o site do jQuery e baixar o framework e fazer o doqnload dos exemplos acima.
Abraços.
Veja
Exemplo 1
Exemplo 2
Exemplo 3
Download
Enviado por: Leandro Garcia - Categoria(s): Frameworks, jquery
Tags relacionadas: dicas, jquery