Screencaster

jQuery - Navegação AJAX mamão-com-açúcar

Seguindo nossa pseudo-série “Como eu gosto de jQuery: é tão simples fazer as coisas com ele!”, segue um código bem simples para fazer uma navegação AJAX, mas antes, caso você queira, veja o exemplo funcionando.

Você também pode baixar os códigos: navegacao_ajax.zip

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Navegação AJAX mamão-com-açúcar</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var home = "home.html"
 
		$(function(){
			navegar(home)
			atribuir()
		})
 
		atribuir = function()
		{
			$("ul#menu li a").click(function(){
				navegar($(this).attr("href"))
 
				return false
			})
		}
 
		navegar = function(pagina)
		{
			$("#conteudo").load(pagina)			
		}
	</script>
</head>
<body id="index">
 
	<div id="geral">
 
		<div id="topo">
 
			<h1>Navegação AJAX mamão-com-açúcar</h1>
 
			<ul id="menu">
				<li><a href="home.html" class="home">home</a></li>
				<li><a href="sobre.html" class="sobre">sobre</a></li>
				<li><a href="contato.html" class="contato">contato</a></li>
			</ul>
 
		</div>
 
		<div id="conteudo">
 
		</div>
 
	</div>
 
</body>
</html>

Como podem ver, com pouco código nós conseguimos fazer uma navegação totalmente funcional. Claro que dá para incrementar muito mais, mas o básico está aí!

Até mais!

Postado em: 14/11/2008 @ 12:11 por Guilherme Rambo. Você pode comentar ou enviar um trackback para este post.
10 comentários