Tutorial JQuery – navegação sem refresh simples e fácil

Boa tarde a todos ae!

Vou colocar aqui um tutorial simples e bem fácil de se fazer sobre navegação sem refresh usando JQuery muitas vezes eu já procurei por isso e é bem interessante.

A estrutura é simples você terá uma div que receberá os dados dos links que funcionará basicamente como um famigerado iframe, mas de uma forma melhor.

Lembrando que este código pode servir para uma navegação com abas só que de uma forma diferente a dica é não deixar as páginas muito pesadas pq se não a performance vai cair bastante deixando o site lento.

Nos próximos tutoriais vou fazer um de accordion novamente e um de abas com imagens e algumas outras funcionalidades que não fiz no outro e também vou fazer um novo sobre menu com slider em breve acredito que nesta semana ainda teremos aqui versões melhoradas dos tutoriais antigos e também vou começar uma série de tutorias sobre php do básico até onde eu sei rs

Vamos ao código, aqui segue o código em JQeury.

$(document).ready(function (){
$(“#conteudo”).load(“index.html”); //Aqui ele faz com que a página carregue o arquivo index.html na div conteudo assim que ele carregar, você pode usar o nome de arquivo que quiser eu deixei este no exemplo para ficar mais intuitivo
$(“.links”).click(function(){ //Evento de clique em algum item do menu
$(“#conteudo”).fadeOut(10); //Aqui faz a div conteudo dar um efeito de fade out para
$(“#conteudo”).load($(this).attr(“href”)); //Aqui carregar o conteudo que é carregado pelo atributo href do link pode por exemplo um span com um atributo name ai você pode usar do modo que quiser.
$(“#conteudo”).fadeIn(1000); //Aqui faz um efeito de fade in na div conteudo com o conteudo já carregado
return false; //Aqui ele faz com que o link não seja carregado, assim ele só carrega o conteudo do arquivo na div aqui no caso a div conteudo
});
});

Aqui eu vou colocar um exemplo em HTML com duas páginas e um menuzinho simples você pode

<div id=”root”>//Div para servir de caixa para segurar todos os elementos
<div id=”menu”> //Div para guardar os links
<a href=”index.html” style=”background:#f0f0f0;”>Home</a> //Link home ele começa com a cor diferente

<a href=”contato.html”>Contato</a>//Link de contato mais pode ser qualquer um.
</div>//Fecha a div menu

<div id=”conteudo”> //Div que vai receber os dados

</div> //Fecha a div conteudo
</div>//Fecha a div root

E aqui eu vou colocar o css que eu usei só para não ficar muito tosco

#root{ //Uma largura na root para ficar um em cima do outro
width:300px;
}
#menu{ //Menu com float para uma div ficar em cima da outra
wdth:auto;
height:25px;
float:left;
}
.links{ //Link com background, margin e padding para dar uma aparencia de aba
margin:0 10px;
background:silver;
padding:5px;
}
#conteudo{ //Um estilo na div conteudo para dar aparência de caixa
border:1px solid #000;
padding:5px;
float:left;
width:auto;
height:100px;
}

A estrutura é simples é possivel fazer muita coisa com esse código simples

Para baixa o zipado clique aqui

Para ver o site funcionando clique aqui

Até mais

Tutorial Jquery – Navegação em abas

Boa noite ae

Bom primeiro tutorial que eu coloco aqui de JQuery que é bem util rs pra quem é tipo eu que não gosta de js, bom quem trabalha com web deve já ter precisado de um jeito para fazer navegação em abas essa foi uma forma fácil que eu fiz com JQuery bem indolor e tranquila. Pra mim JQuery e CSS são do Piru

O bloco de código é simples algumas linhas somente

$(function(){

var parte=0; // Variavel que recebe a largura de cada parte da aba definida no css e passada para cá manualmente

var pos=0; // Variavel que definira a posição do fundo da aba

$(“.menu_parte”).click(function(){ //evento de clique na aba
pos=this.title*parte; // Calculo para a posição que o fundo da aba assumirá quando o evento acontecer
$(“#slider_total”).animate({“marginLeft”:”-”+pos+”px”},3000); //Movimentação do fundo da aba
});

});

A classe ‘.menu_parte’ são as abas propriamente ditas elas precisão ter o parametro ‘title’ definindo a posição dela iniciando do zero como é normalmente na vida rs. O id ‘#slider_total’ é literalmente o “fundo” da aba onde serão postas as partes que precisão ter uma largura definida e explicita na variavel ‘parte’ como eu comentei no bloco de código.

O css é simples seguindo esta estrutura

<div id=”menu_slider”>// A div agregadora das abas
<span class=”parte_menu”  title=”0″>// as abas seguindo a numeração do parametro title podendo ser quantas for necessario
</span>

….

</div>

<div id=”caixa_slider”>//Uma caixa para as partes da aba
<div id=”slider_total”>//O ‘fundo’ das abas com uma largura bem grande
<div class=”parte_slider”>//A primeira  parte das abas o interessante para o layout é ela ter a mesma largura da caixa (a primeira div) para ser realmente bonito e lembrando da largura dessa div ser explicita no código da jquery
<div class=”conteudo_parte”>//uma div para colocar o conteudo na parte da aba caso queira dar um padding sem afetar o resto da aba

….

</div>
</div>
</div>
</div>

Bom é isso o primeiro tutorial qualquer duvida problema ou qualquer outra coisa espero um comentário.

Até!