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
21/12/2009 - 20:48
Durante muito tempo resisti ao uso de frameworks, tanto para Javascript quanto para PHP, mas hoje percebo o quanto perdi tempo com essa idéia inútil.
Essa minha mudança se deu após iniciar o uso do jQuery, framework em Javascript. A rapidez com que eu consigo desenvolver aplicações, funções, etc. Chega a ser impressionante em relação ao tempo que eu usava anteriormente, isso sem contar a limpeza do código, o menor número de código para fazer as coisas e as probabilidades que eu, agora, tenho em mãos.
Uma coisa deve-se ficar claro, framework não é uma linguagem de programação, não é uma metodologia de desenvolvimento, é, um conjunto de funcionalidades implementadas em determinada linguagem para serem utilizadas para auxiliar o desenvolvimento de aplicações. Trazendo maior velocidade, acerto no desenvolvimento do código.
Os frameworks, pelo menos a maioria deles, são desenvolvidos tendo a idéia de orientação a objetos.
O mais legal de um framework é que eles não são “engessados”, mas podem ser adaptados para cada projeto que você utilizem.
Os Frameworks não são linguagens de programação!
Existem Frameworks para, praticamente, todas as linguagens de programação e, em boa parte delas, váriosframeworks diferentes.
Enviado por: Leandro Garcia - Categoria(s): Frameworks
Tags relacionadas: Frameworks