Juitter e eu aprendendo JQuery

O Rodrigo lançou um(a) serviço/ plugin/ ferramenta/ página, esta semana, chamado Juitter, que basicamente você instala, na sua página, e permite que os visitantes possam acompanhar, em tempo real, o que as pessoas estão falando no Twitter sobre determinado assunto. O grande diferencial do Juitter é a utilização do Framework JQuery que permite um efeito fantástico na atualização das mensagens.

Eu já tinha escutado falar do JQuery, Ajax e todas as possibilidades mas ainda não tinha “me apaixonado” por essas técnicas que permitem atualizar apenas algumas partes do código HTML, o Juitter foi a veredito final… preciso aprender essa porra!

Fui lendo aqui e ali e então chamei o Rodrigo no MSN, eu já atrapalho o Rodrigo a muito tempo então ele já tem uma certa noção do tamanho da montanha que esta entre mim e o conhecimento avançado de programação para WEB, e perguntei: com base no meu conhecimento você acha que já me é possível estudar Jquery?

Então comecei a ler, tentar e importunar… até que então consegui fazer aparecer na tela uma contagem, essa contagem vai mudando e quando chega em 10 ela passa a apagar o número mais antigo e incluir o mais novo no topo. Pode parecer uma coisa muito simples e sem utilidade mas quem conhece um pouco de HTML sabe que mudar informações sem recarregar a página não é tão simples assim. E tem mais, isso foi apenas para me dar noção de como funciona a manipulação de elementos via Jquery, as possibilidades, agora, são infinitas.

Vou compartilhar com vocês o que o Rodrigo me ensinou a fazer pois o Jobson certa vez me ensinou que devemos repassar gratuitamente tudo aquilo que aprendemos gratuitamente. Já viu que sou cheio de professores? O Bruno Alves, através de seus posts, me ensinou bastante sobre SEO, o Jobson com dicas de redirecionamento, o Fante de desenvolvimento… caralho.

Desenvolvendo uma aplicação simples com Jquery

Primeiro você precisa baixar o framework, pode acessa a página oficial do JQuery e fazer o download.

Feito isso crie um arquivo chamado sistema.php no mesmo diretorio que colocou o jquery.

Agora crie um novo arquivo chamado teste.html e dentro dele inclua uma tag ul com um id='teste' e antes da tag você vai chamar os dois arquivos JS, assim:

1
2

<script type="text/ecmascript" src="jquery.js"></script>
<script type="text/ecmascript" src="teste.js"></script>

Agora abra o arquivo sistema.js e escreva o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

i=1;
function atualiza(){
  // adiciona LI no UL
  $("<li></li>")
    .html("mensagem de teste, vai se repetir "+i) 
    .attr('id', 'li'+i)
	.prependTo("#teste");
	//esconde o LI que adicionamos antes de mostrar com efeito
	$("#li"+i).hide();
 
	// mostra devagar
	$("#li"+i).fadeIn("slow");
	// testa para ver se já tem 10 registros
	if (i>10) {
	e = i-10;
	$("#li"+e).hide();
	}
	// adiciona mais 1 para gera sempre um id unico pros LI
   i++;	
  // manda rodar a funcao atualiza em 3 segundos	
  setTimeout(atualiza,3000);
}
 
$(document).ready(function(){
	atualiza();					   
});

Salve e abra o arquivo teste.html no browser, você deve ver uma contagem de teste…

This entry was posted on quinta-feira, fevereiro 5th, 2009 at 3:58 pm and is filed under dicas. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.