Guanabara.info: Podcast, Tecnologia, iPhone, Notícias, Tutoriais, Vídeo Aulas, Programação

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.

1. Aprendendo a importar o Framework do Google
2. Início de Eventos e Efeitos [FadeTo e Toggle]
3. Manipuladores modificando uma Classe
4. Manipulação textual
5. Criando um sistema de Abas
6. Usando o Método Ajax de .load()

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.

<div class="blocos">
	<div class="bloco">
		<div class="conteudo">Aqui escrevemos algo!</div>
	</div>
	<div class="bloco">
		<div class="conteudo">Aqui escrevemos algo!</div>
	</div>
	<div class="bloco">
		<div class="conteudo">Aqui escrevemos algo!</div>
	</div>
	<div class="bloco">
		<div class="conteudo">Aqui escrevemos algo!</div>
	</div>
<div class="clear"></div>
</div>

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.