Posts com a Tag ‘jQuery’

Tab automático com jQuery

sábado, 22 de novembro de 2008

Salve! Salve! pessoal. Mais um post com uma dica bacana de jQuery!

Esta técnica é útil para acelerar o processo de digitação de campos com valor fixo em formulários. Telefone por exemplo.

Neste mini tutorial eu mostro como os seletores jQuery são poderosos e práticos.

O XHTML

Pra começar o XHTML da página do formulário. É um código bem simples. Mas quem não estiver familiarizado com XHTML é só deixar comentado que respondo!

Basicamente este código monta uma página com 3 campos de texto para o DDD, o prefixo e o número do telefone.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
 
	<head>
 
		<title>Tab autom&aacute;tico com jQuery</title>
 
		<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
		<script type="text/javascript">
                  [...código javascript comentado abaixo...]
		</script>
 
	</head>
	<body>
		<form method="post" action="autotab.htm">
			<fieldset>
				<label for="ddd">DDD</label>
				<input type="text" class="autotab" name="ddd" id="ddd" maxlength="2" size="2" tabindex="1" />
				<label for="prefixo">Prefixo</label>
				<input type="text" class="autotab" name="prefixo" id="prefixo" maxlength="4" size="4" tabindex="2" />
				<label for="numero">N&uacute;mero</label>
				<input type="text" class="autotab" name="numero" id="numero" maxlength="4" size="4" tabindex="3" />
			</fieldset>
		</form>
	</body>
 
</html>

Agora o código javascript

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function() {
	$(".autotab").keyup( function (event) {
		if ((event.which >= 48 && event.which <= 57) || (event.which >= 96 && event.which <= 105)) {
			if ($(this).val().length == $(this).attr('maxlength')) {
				var tabindex = $(this).attr('tabindex');
				tabindex++;
				$('input[tabindex=' + tabindex + ']').focus();
			}
		}
	});
});

Na linha 1 do javascript, criamos a função que executa o script apenas após o carregamento completo do DOM.

Na linha 2 criamos uma função que será executada no eventro keyup, ou seja, sempre que se pressionar (e soltar) uma tecla. Aí está um dos “pulos do gato” da jQuery, os seletores!
Usando $(’.autotab’) selecionamos todos elementos que tiverem a classe autotab atribuída. Esta classe foi atribuída aos elementos input type=”text”

Na linha 3 verificamos se foi pressionada uma tecla numérica 0 a 9.

Na linha 4 verificamos se a quantidade de caracteres digitados - $(this).val().length - no campo é igual ao atributo maxlength - $(this).attr(’maxlength’) - do elemento.

Nas linhas de 5 a 7, caso satisfaça a condição, muda o foco para o próximo elemento na sequencia de tabindex usando o seletor [attribute=value] - $(’input[tabindex=' + tabindex + ']‘).focus();

Este post não foi muito didático, mas o lema da jQuery é esse mesmo, Write Less, Do More, ou, Escreva menos e faça mais :), portanto, quaisquer dúvidas responderei (ou tentarei responder) através dos comentários.

Clique aqui para ver o exemplo em funcionamento!

É isso aí pessoal! Exemplo simples mas que pode ser muito útil em nossos projetos!

Ao som de O Rappa - Monstro invisível, Forte Abraço! Até o próximo post!

Tags:,
Publicado em XHTML, jQuery | 4 Comentários »

Introdução ao jQuery

sexta-feira, 21 de novembro de 2008

Bom pessoal. Esse é meu primeiro post aqui no blog da Contagia. Aliás já vou começar com um problema.

Apesar de trabalhar com Internet já a bastente tempo, nunca bloguei! Não conheço nada de WP :( Mas prometo que irei me esforçar para deixar este espaço melhorzinho.

Pra começar então, vou falar de jQuery. O super-ultra-mega-master-plus framework javascript que tem feito o maior sucesso entre desenvolvedores client-side. E de tanto sucesso que faz acho que você já deveria saber o que é!

Baboseiras a parte, como o “Dinossauro das CSS” Maurício Samy explica muito bem neste artigo, a jQuery é uma biblioteca que simplifica (e muito) a vida de programadores Javascript.

Tudo muito legal, tudo muito bonito. Mas o que essa jQuery faz?

A jQuery simplifica a sintaxe Javascript e aumenta muito sua produtividade, transformando por exemplo:

document.getElementsByTagName(”p”)

em

$(’p')

ou ainda,

document.getElementById(’id_do_elemento’)

em

$(’#id_do_elemento’)

Não compre agora!!! A jQuery também percorre e manipula o DOM e CSS, trabalha com Eventos, cria efeitos de animação e tem um incrível suporte a Ajax.

Eu falei em comprar? nada disso! A jQuery é grátis, basta fazer o download e começar a se divertir trabalhar.

Num vou esticar muito o papo. Aqui neste blog irei sempre postar algumas dicas e situações do cotidiano.

Seguem links úteis:

Documentação oficial
Comunidade jQuery Brasil

Ao som de Live - Operation Spirit, Forte Abraço, até o próximo post!

Tags:, , , ,
Publicado em jQuery | 2 Comentários »