Guanabara.info » jQuery

Curso de jQuery – Junte o útil ao agradável – Parte 7

Gustavo Bordoni — Sat, 30 Jan 2010 15:00:11 +0000

Olá seres Guanabarianos, estou aqui direto da Campus Party, pensei que seria muito interessante aproveitar todo o tempo que tenho aqui para poder criar algum tipo de conteudo útil para a galera do Guanabara.info, e me veio a idéia de dar continuidade no Curso de jQuery.

Bom desta vez vou começar a complicar um pouco, do que fizemos anteriormente, vamos fazer algumas caixas se encaixarem em na resolução do Nosso usuário, porém não vamos utilizar CSS, que normalmente ocorrem vários tipos de problemas quando temos de usar o CSS para fazer isso.

Então vamos começar a fazer o código…

O que fazer para começar?

Bom de início, acho interessante passar a vocês como será feito, primeiro vamos pegar o tamanho da janela do usuário, que como muitas vezes o usuário está com a tela maximizada, temos a resolução. Depois disso iremos usar essa informação para inserir o tamanho de cada um dos blocos fazendo uma pequena conta onde iremos pegar o tamanho da janela e iremos dividir pelo número de blocos existentes.

Contudo quero que este seja algo que funcione de maneira completamente automática, para facilitar a sua vida quando você colocar mais blocos.

Começando o código HTML

Primeiro vamos fazer o código HTML para que vocês possam entender como irá funcionar o nosso pequeno algorítimo.


	
		Aqui escrevemos algo!
	
	
		Aqui escrevemos algo!
	
	
		Aqui escrevemos algo!
	
	
		Aqui escrevemos algo!

Bom o nosso código será composto de um caixa[div:blocos] que será responsável por reter a informação do tamanho da tela do usuário.

Já as caixas[div:bloco] que temos no nível seguinte são responsáveis por reter o tamanho de cada um dos blocos exibidos.

Dentro de cada uma destas caixas temos uma outra[div:conteudo] que será onde iremos colocar nosso texto, por exemplo.

No final temos uma outra caixa[div:clear] que será usada para limpar qualquer tipo de erro com o atributo do CSS, o float.

Qual será o CSS?

Como sempre o CSS que iremos usar só vai criar um estilo fantasia, então você vai poder modificar quase tudo, exceto a definição float:left; usada para colocar todas as caixas [div:bloco] na horizontal e a caixa[div:clear] que acaba com os problemas das caixas[div:bloco] com a propriedade float do CSS.

div.blocos{
	width:100%;
} 

div.blocos div.bloco {
	background:#e5e5e5;
	border:1px solid #323232;
	float:left;
	margin:0 9px;
} 

div.blocos div.bloco div.conteudo {
	padding:10px;
}

div.clear {
	clear:both;
}

Criando um jQuery para redimencionar as divs

Agora vamos ao tão esperado jQuery, e segue o código e logo depois uma explanção bem completa do que irá acontecer.

$(document).ready(function(){
	blocosInteligentes()

	$(window).resize(function () {
		blocosInteligentes()
	});

});

function blocosInteligentes() {
	$("div.blocos").css({ 'width' : "100%"});

	var blocosSize = $("div.blocos").width();
	var qtdBlocos = 4;
	var margBlocos = 20;
	var completeMargin = Math.floor(qtdBlocos * margBlocos);
	var fullBlocos = Math.floor(blocosSize - completeMargin);
	var eachSize = Math.floor(fullBlocos / qtdBlocos); 

	$("div.blocos").css({ 'width' : blocosSize});
	$("div.blocos div.bloco").css({ 'width' : eachSize});
}

No código acima comecei definindo que o tamanho da caixa[div:blocos] é a tela toda[.css({ 'width' : "100%"});], e logo abaixo defino uma variavel[var blocosSize] e atribuo[= $("div.blocos").width(); ] a ela o valor da largura da caixa[div:blocos].

Depois de feito isso podemos atribuir a duas outra variáveis dois outros valores, a quantidade de blocos que usamos e quanto de margem lateral cada um deles tem. No nosso caso teremos 4 blocos e cada um deles com 20 de margem.

Após isso iremos fazer uma conta[Math.floor()] para obtermos quanto temos de margem ao todo, e depois iremos fazer uma conta para ver quanto espaço teremos para a largura para todas as caixas[div:bloco].

Logo abaixo, dividimos o novo tamanho da caixa[div:blocos] pela quantidade de caixas[div:blocos] e temos o valor da largura de cada um dos blocos.

Após feito as contas só temos que atribuir a caixa[div:blocos] sua largura total com a margem[.css({ 'width' : blocosSize});], e depois atribuir a cada uma das caixas[div:bloco] a largura que calculamos acima[.css({ 'width' : eachSize});].

Bom este código tem uma diferença para todos os que eu já apresentei, o código principal vai dentro de uma função fora do código do jQuery, e ai chamamos essa função dentro do jQuery e quando acontece um redimencionamento da tela do Browser, assim nunca ficaremos com o scroll horizontal.

Após feito tudo isso vocês podem salvar os arquivos editados, enviar para o servidor e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente, basta olhar a barra lateral.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.

Curso de jQuery – Junte o útil ao agradável – Parte 6

Gustavo Bordoni — Wed, 12 Aug 2009 21:27:08 +0000

Olá Olá, estou aqui novamente com o curso de jQuery, e chegamos a nosso 6 artigo e dessa vez eu vou usar o WordPress para fazer algo mais interesante, e iremos analisar e ver exatamente o que acontece.

Bom eu sei que demorou mas chegou, eu estava com muitas coisas para fazer durante as minhas férias, ai acabei deixando de escrever para o Guanabara.info e para o meu blog, mas agora estou voltando com força toda, e dessa vez será um ótimo artigo, que integra o WordPress com um pequeno código jQuery.

Sugiro quem ainda não viu os artigos anteriores dar uma olhada antes de começar a ler este, pois conceitos e informações abordadas em outros não serão cobertas nesse.

Vamos ao código…

Como já é de praxe começamos com um código HTML, que dessa vez vai ser usado 2 vezes, a primeira em um arquivo do seu tema do WordPress e outro para criar uma página.

O primeiro é aquele que vai servir de base para a que sejam importados os links. Coloque em o código em qualquer arquivo .php do seu tema do WordPress:


		... Carregando ...
		Carregar denovo

Agora crie um arquivo .php com o nome que quiser dentro da pasta do tema do seu WordPress e coloque o seguinte código:




	

	Erro ao carregar a página!

Após feito isso você tem que ir ao painel de administração do seu blog e criar uma página e escolhe o layout Artigos Aleatórios, e dê a ela o nome de Random.

Agora vamos a parte que realmente nos interessa, o código jQuery que vai ser usado, que deve ser colocado no cabeçalho[head] do tema:

O primeiro código usado[load();] vai ser executado assim que o documento for carregado, sem que exija alguma ação. Então ele vai buscar a página /random/ que acabamos de criar e vai carregar dentro do elemento[li] de identificação #randomPost.

Logo abaixo temos uma função[function();] que vai ser ativada quando o for clicado no elemento #another, e esta função faz com que seja re-colocado[.text();] um texto para que o usuário saiba que algo está acontecendo, e logo depois será carregado dentro deste mesmo elemento[#randomPost] a página que acabamos de fazer[/random/].

Como eu já havia dito o return false; é para que nenhum valor desta função seja retornado. Ou seja menos variáveis a se manter, ou seja mais otimização.

Então neste artigo foi explicado como montar um pequeno widget que busca 8 artigos aleatórios na sua base de dados e exibe o link para acessa-los. Isso é legal para um blog porque ajuda a manter os usuários por mais tempo lendo.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.

Curso de jQuery – Junte o útil ao agradável – Parte 5

Gustavo Bordoni — Wed, 15 Jul 2009 21:04:47 +0000

Mais uma vez estamos aqui com um artigo de jQuery, e agora com o quinto artigo da série, espero que estejam gostando e entendendo, porque poucas pessoas estão colocando dúvidas, o que é muito bom, sinal que está bem explicado.

Agora vamos começar a desenvolver algo que realmente pode ser aplicado de maneira ativa em um site. É um sistema bem simples de abas. Mas é claro, se você não viu os artigos anteriores eu acho que é importante antes de começar a ler este. Pois coisas explicadas anteriormente não serão explanadas, abaixo vai uma lista com os últimos artigos:

Vamos ao código…

Como nos outros eu não pretendo comentar muito o CSS e o HTML pois não são o foco destes artigos, então caso deseje entender pode dar uma olhada nas aulas de HTML do Guanabara.info e para CSS sugiro o Maujor, muito bom.

O código CSS que deve entrar no seu cabeçalho[head] deve ser o seguinte:

Ele ficou um pouquinho maior comparado ao do artigo anterior, e dentro do corpo da página[body] entra o seguinte HTML:

	
		
			Aba Um
			Aba Dois
			Aba Três
			Aba Quatro
		
		
			Esta é a primeira aba
		
		
			Esta é a segunda aba
		
		
			Esta é a terceira aba
		
		
			Esta é a quarta aba

Este também ficou um pouco maior, mas agora vamos a parte que realmente nos interessa, o jQuery usado é o seguinte:

Bom o código começa especificando que todos os elementos que casem com #abas div devem sumir, e logo abaixo manda o apenas o primeiro aparecer[#abas div:first]. Até ai fizemos sumir todas as caixas e apenas 1 aparecer.

Agora faremos o primeiro elemento dos botões[#abas ul li:first] ficar com a classe ativo.

Abaixo iremos criar uma função que ao clique[click] começa retirando da primeira aba a classe ativo, e abaixo iremos fazer com que o elemento que foi clicado[this] tenha atribuído a ele a classe ativo.

Bom agora vem a parte que ira fazer a mágica deste código, onde uma variável[abaAtual] receba o valor que será definido pelo parâmetro href do elemento a do botão das abas, que no nosso caso deve combinar com o parâmetro id do elemento div, repare que #aba-1 do a combina com #aba-1 do div.

Então abaixo vem um código que ira esconder novamente os elementos #abas div e logo depois temos o código que deve mostrar ao usuário o conteúdo da aba em que ele clicou.

Logicamente quando for clicado no elemento a com o parâmetro href igual a #aba-1 o elemento div de parâmetro id igual a #aba-1 será mostrado, não importando a ordem em que tais aparecem.

Só para lembrar que no final aquele return false; é para que nenhuma variavel ali usada seja levada para fora desta função.

Bom então em resumo fizemos com esse código, um pequeno sistema de abas.

Após feito tudo isso vocês podem salvar o arquivo editado e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.

Curso de jQuery – Junte o útil ao agradável – Parte 4

Gustavo Bordoni — Wed, 08 Jul 2009 23:36:13 +0000

Bom galera estamos aqui com o quarto artigo sobre jQuery e primeiramente quero me desculpar pela demora, e pela mudança do dia que o artigo será publicado, ocorreu um problema e vou entrar em semana de provas, logo ficou complicado escrever para antes, e o Gustavo Guanabara havia me pedido para escrever na Terça, então juntei o útil ao agradável.

Então vamos ao que interessa, hoje eu pretendo mostrar a vocês como manipular texto, usando outros eventos. Ainda nada relacionado a coisas mais complexas, sei que é bem chato essa parte introdutória para quem já conhece, mas é necessário para que seja possível um aprofundamento do mesmo.

Lembrando que se você não acompanhou os artigos anteriores, sugiro que antes de ler este dêem uma olhada nos 3 anteriores, que são a introdução a basicamente tudo que veremos nos artigos a seguir.

Vamos ao código…

Comecemos com o HTML, que será praticamente o mesmo do último artigo:

Fazer a modificação

Div sem Modificação

Esse código tem que ser colocado no Corpo de sua página[body], e agora adicione ao cabeçalho de sua página[head] o código CSS para fazer o estilo da página, este está ligeiramente diferente do apresentado no artigo anterior:

Agora vamos para a parte do jQuery, que é o que nos interessa:

Agora vamos entender o código que está sendo usado e o que ele está fazendo, parte a parte. Começando com a mudança do evento[hover()] que irá acionar a função quando você colocar o mouse em cima do elemento definido dentro dos parênteses[#abrir].

Quando você fizer a ação sugerida acima, irá acontecer a primeira função do código[function(){};], que irá ativar o código[after()] que adiciona depois do elemento nos parênteses[#texto] um texto, que pode conter códigos HTML.

No caso ele irá adicionar o elemento p .texto após a div #texto.

Bom um pouco mais abaixo temos a segunda função[function(){};] do evento[hover()], que diz o que irá acontecer assim que o usuário retirar o mouse de cima do elemento definido nos parênteses do evento[#abrir].

Ainda na segunda função temos uma ação[find()] muito interessante do jQuery, que nos permite fazer uma busca no elemento[body] dentro do parêntese anterior à ação, por um outro elemento definido no parêntese após a ação[p]

Essa função deve retornar para o FrameWork alguns elementos, no nosso caso o único p existente. Ai entra um código de remoção[remove()] de um elemento da página.

Então basicamente esse código irá adicionar um elemento[p .texto] após a div #texto quando o mouse estiver em cima do botão[#abrir] e quando for retirado o mouse de cima este elemento[#abrir] será deletado.

Após feito tudo isso vocês podem salvar o arquivo editado e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.

Curso de jQuery – Junte o útil ao agradável – Parte 3

Gustavo Bordoni — Sat, 27 Jun 2009 23:25:40 +0000

Bom galerinha chegamos à terceira semana de artigos sobre o mais famoso framework de JavaScript, o jQuery. Basicamente nas duas semanas anteriores falamos um pouco sobre como indexar o framework pelo Google e sobre efeitos e eventos. Se você não viu os últimos artigos sugiro que vocês de dêem uma olhada antes de ler este.

Últimos Artigos:

Depois de aprendermos um pouco sobre Efeitos e Eventos, temos que começar a aprender Manipuladores, que irão modificar por exemplo classes[class] ou adicionar um texto a um elemento da sua página. Basicamente eles são usados para fazer as modificações, e dar alguma interação à página.

Vamos ao código…

Primeiramente iremos olhar para a parte do XHTML, que iremos colocar dentro do corpo da página[body] o seguinte código:

Fazer a modificação


Div com Modificação

O código acima é igual ao do artigo anterior, só modifiquei o texto um pouco. Mas as caixas[divs] não foram modificadas.

Agora iremos colocar o código CSS no cabeçalho da nossa página[head], iremos modificar apenas uma linha do que usamos na última aula.

A linha que adicionamos é o estilo da classe que será adicionada[div.modificar] à caixa de texto[div.texto].

Bom agora iremos a parte que nos interessa o código jQuery que irá fazer com que seja adicionada uma classe [class] para a caixa de texto[div.texto].

Então iremos adicionar no nosso cabeçalho o seguinte código:

Bom como já foi mostrado no artigo 2 da série, a Evento toggle irá fazer com que seja alternado entre a primeira e a segunda função[function() {};] toda vez que o usuário clicar na caixa[#abrir].

Então quando clicarmos pela primeira vez no botão[#abrir] será feito um fade para que a caixa se torne quase transparente[fadeTo(1000, 0.0001, function (){!1!], ai entra o modificador addClass que irá fazer com que seja adicionada a classe que definimos[modificar] para a caixa [#texto]. Após feito isso um efeito[fadeTo] é usado para tornar a caixa opaca outra vez.

Ao clicar pela segunda vez teremos um fade[fadeTo] para que a caixa se torne transparente e depois é removido[removeClass] a classe modificar da caixa, da mesma forma que na função anterior é feito um fade[fadeTo] para a caixa se tornar opaca outra vez.

IPCs:

Bom essa segunda que é adicionada é simplesmente para que o que vem a seguir só acontecer quando a a fadeTo tiver sido terminada.

Após feito tudo isso vocês podem salvar o arquivo editado e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente.

É basicamente isso que é construído o código, existem outras maneiras de usar os modificadores, vocês podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa.

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.

Curso de jQuery – Junte o útil ao agradável – Parte 2

Gustavo Bordoni — Sat, 20 Jun 2009 02:59:09 +0000

Bom estamos aqui com o segundo artigo da série jQuery, onde vamos fazer algo muito útil com pouca quantidade de código.

Últimos Artigos:

Aprendendo a importar o Framework do Google

Nos primeiros artigos é de suma importância que todos comecem a aprender um pouco de como funciona os Eventos, os efeitos e os manipuladores. Mais para frente você irá perceber o quão importante foi ver esses 3 tipos de elementos antes de começar a realmente fazer algo útil.

Seguiremos a idéia do artigo passado onde importamos o jQuery direto do Google.com para que o tempo de carregamento fosse o mínimo possível.

Neste artigo irei falar sobre como começar a fazer usar um Evento que irá chamar um efeito de transparência (fade).

Comecemos criando nosso XHTML, que deve conter o seguinte dentro de seu corpo[body]:

	Fazer o Fade
	Div com FadeIn e Out

Tenham como prática usar sempre o atributo id para fazer a identificação de qual elemento da página será modificado, pois a classe [class] poderá se modificada.

Após feito o XHTML iremos usar o seguinte CSS para poder fazer o estilo da página:

div.texto { width:250px;background: #e1e1e1; border:1px solid #333;padding:10px; margin-top:10px;}
div.botao { text-align:center; line-height:30px; width:105px; padding: 0 10px; background: #e1e1e1; border:1px solid #333; cursor:pointer; }

Só para que vocês entendam, quando uso o ponto antes de texto e botao, estou definindo que o estilo será aplicado em uma classe[class], caso fosse um id seria um jogo da velha[#].

Agora iremos para a parte do jQuery, nesse artigo iremos usar o seguinte código:

$("#abrir").toggle(
	function() {$("#texto").fadeTo(1000, 0.1);},
	function() {$("#texto").fadeTo(1000, 1.0);}
);

Lembre-se de onde deve ser colocado o código jQuery [Artigo 1].

Vamos entender o que irá acontecer nesse código, primeiramente em jQuery é importante começar sempre com um cifrão[$], este deve mostrar ao framework que estamos começando a atribuir algo para o elemento que deve e ser identificado logo a seguir [("elemento")].

No caso o elemento de id abrir vai fazer loop entre as funções que são colocadas abaixo.

Temos duas funções que iremos ativar assim que o usuário clicar no elemento #abrir, se for clicado uma vez a primeira função[function(){}] será ativada, no segundo clique a segunda função será ativada, e dessa forma funciona o evento toggle.

Dentro do evento[toggle] temos a função que irá ativar no elemento #texto o efeito fadeTo(1000, 0.1);, que irá fazer com que #texto mude de opacidade até chegar em 10%[0.1] da opacidade total em um tempo de 1000 milisegundos[1000], ou 1 segundo.

Logo a função abaixo[fadeTo(1000, 1.0);] irá fazer com que o elemento #texto mude sua opacidade em 1 segundo para 100% de sua opacidade original.

Lembre-se que todas as funções e códigos do jQuery são CaseSensitive, ou seja faz diferença usar fadeTo e fadeto.

Após feito tudo isso e entendido como funciona, salve o seu arquivo .html e veja o resultado, ou acesse a página para ver o resultado.

Os comentários do artigo servem não só para críticas, mas também para perguntar sobre algo que não compreendeu, ou seja não se acanhem!

Curso de jQuery – Junte o útil ao agradável – Parte 1

Gustavo Bordoni — Sat, 13 Jun 2009 22:00:05 +0000

Olá olá, estou de volta mas desta vez irei falar um pouco de como usar o tão importante jQuery. Estou falando nada mais, nada menos que o framework de JavaScript mais usado na net, que ajuda muito o código ficar mais leve e mais fácil de se programar.

Vamos começar com o mais básico, teremos puxar ao código do framework, para podermos começar a trabalhar com o código. Usaremos o link que O PAI nos fornece, pois ai ele irá carregar mais rápido. O código abaixo irá indexar o arquivo principal:

O código acima deve entrar no cabeçalho do seu site, dentro da tag .

Após feito isso podemos começar a trabalhar em cima do código que irá exibir a mensagem “Hello World” na tela.

Bom todo código jQuery tem que iniciar da seguinte forma para que funcione:

Após feito isso teremos que adicionar o código que irá fazer o alerta pular na tela ao clicar em uma div. Primeiro iremos adicionar uma dentro do corpo[body] do seu código.

Exibir mensagem

Este div deve ter um id para que possamos adicionar a ação de criar o alerta e uma classe para que possamos cria o estilo do botão. Abaixo você encontra o código CSS que irá criar o estilo de nosso botão.

Adicione o código acima dentro da cabeçalho da sua página, e agora volte-se para a parte do código onde iremos escrever a função para criar o alerta. Substitua “// Seu código aqui” por:

$("#cria_alerta").click(function(){
alert("Hello World!");
});

Agora iremos entender um pouco código acima, a parte onde você encontra $(#cria_alerta) você está definido qual será o objeto que irá disparar a ação, .click(); diz qual ação irá acontecer ao clicar no objeto declarando anteriormente, e alert(); faz com que o alerta seja criado.

Após feito isso já temos nossa página criada, basta você testar, salve o arquivo como .html, e abra com algum navegador para ver o resultado ou veja como ficou o resultado do nosso pequeno trabalho na web.

Qualquer dúvida basta deixar um comentário que eu irei responder!