Inserção de conteúdo sem recarregamento da página

Categoria - Desenvolvimento, Javascript, jQuery - Por - Felipe Gustavo de Lima No Comments »

jquery_logo.gif
Simples tutorial, ensinando a inserir conteúdo de modo assíncrono sem que ocorra recarregamento no restante da página.
Para isso usaremos a biblioteca javascript jQuery.
O jQuery tem suporte cross-browser, CSS 1 - 3 e o básico de Xpath.
Download e documentação no site oficial:
http://jquery.com
Exemplo:

 
<!-- Importa a Biblioteca do jQuery -->
<script src="http://www.qosmio.com.br/wp-admin/lib/jquery-1.2.3.js" type="text/javascript"><!--mce:0--></script>
<!-- Importa a nossa função -->
<script src="http://www.qosmio.com.br/wp-admin/lib/centralcontent.js" type="text/javascript"><!--mce:1--></script>
 
<!--[If lte IE 7]>
	<link type="text/css" href="css/ie.css" mce_href="http://www.qosmio.com.br/wp-admin/css/ie.css" rel="stylesheet" />
<![endif]-->
<div id="page">
<div id="back">
	<a title="Voltar ao anúncio">&lt;&lt; |</a></div>
<div id="menu">
<ul>
	<li>
<a id="content1" title="Home" href="#">Home</a></li>
	<li>
<a id="content2" title="A Empresa" href="#">A Empresa</a></li>
	<li>
<a id="content3" title="Portfólio" href="#">Portfólio</a></li>
	<li>
<a id="content4" title="Quem Somos" href="#">Quem Somos</a></li>
	<li>
<a id="content5" title="Fale Conosco" href="#">Fale Conosco</a></li>
</ul>
</div>
<div id="content">
&lt; p&gt;Exemplo de inserção de conteúdo sem carregar a página<!-- p--></div>
</div>
// Cria a variável mostrar
// A Qual receberá os seguintes parâmetros
// (url, conteudo, tempo, iniciar e show)
var mostrar = {
  $url:'', $conteudo:'', $tempo:'',
  //Iniciar recebe a nossa função
  iniciar: function() {
	// Nossa função sera executada quando
	// quando houver um click no bloco
	$('div#menu a').click(function(){
		// Variável url recebe o atributo id
		// do link do menu que for clicado
		//e concatena com a extensão html
		mostrar.$url = $(this).attr('id')+'.html';
		// Variável conteudo define onde será
		// exibido o bloco com o conteudo
		mostrar.$conteudo = $('div#content');
		// Variável conteudo recebe a tag img
		// E a escreve dentro do bloco do conteúdo
		mostrar.$conteudo.html
		('&lt; img src="./img/ajax-loader.gif" /&gt;');
		// Define o tempo para exibição do conteúdo
		// Que foi definido para 2 segundos
		mostrar.$tempo = setTimeout('mostrar.show()', 2000);
	});
},
	// Cria a função para leitura do arquivo html
	show:function() {
	// Criamos o diretório includes e colocamos os
	//arquivos neste diretório
	mostrar.$conteudo.load('./includes/'+mostrar.$url)
	// Limpa o timeout
	clearTimeout(mostrar.$tempo);
	}
}
// Iniciamos a função
$(function(){
	mostrar.iniciar();
})
* {margin:0;padding:0;text-decoration:none;
  font-family:Georgia, Times, Times New Roman, serif;}
#page{width:700px;border:1px solid red;float:left;margin-left:20%;}
#back {
	  opacity:.50;filter: alpha(opacity=50);
	  -moz-opacity: 0.5;border:1px solid black;
	  background-color:blue;width:6%;height:5%;
	  line-height:1.8;float:right;margin:10px;padding:2px;
}
#menu{width:15%;padding:10px 0px 0px 10px;
	float:left;margin:10px;border:1px solid green;}
#content{border:1px solid yellow;width:70%;float:left;}
p{padding:10px;}
bdo{font-variant:small-caps;
	color:red;font-weight:bold;font-size:25px;}
span{font-weight:bold;margin:33%;}
ul li{list-style:none;}
a:link{color:#000;}
a:visited{color:#FF00FF;}
a:hover{text-decoration:underline overline;color:#CCC;}
a:active{color:#00FFFF;}
/*
Margin Left in ie 6
*/
#page{margin-left:10%;}

Confira o resultado aqui

Adicione ->del.icio.us | Reddit | Slashdot | Digg | Facebook | Technorati | Google | StumbleUpon | Windows Live | Tailrank | Furl | Netscape | Yahoo | BlinkList
WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in