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

jQuery - Menu em abas mamão-com-açúcar

Como eu gosto de jQuery: é tão simples fazer as coisas com ele! Segue então um código prontinho pra quem deseja montar um menu em abas, o código está o mais simples possível, e claro que está desta forma para ser postado no blog, para usar num site seria legal tornar este javascript não-obstrutivo e remover algumas repetições no código:

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

<!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>Menu em abas simples</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 tabAtual = 1
 
		mudarTab = function(numeroTab) {
			$("#tab_"+tabAtual).toggle()
			$("#tab_"+numeroTab).toggle()
			tabAtual = numeroTab
		}
	</script>
</head>
<body id="index">
 
	<div id="tabs">
 
		<a href="#tab_1" onclick="mudarTab(1)">Tab 1</a>
		<a href="#tab_2" onclick="mudarTab(2)">Tab 2</a>
		<a href="#tab_3" onclick="mudarTab(3)">Tab 3</a>
		<a href="#tab_4" onclick="mudarTab(4)">Tab 4</a>
 
		<div id="tab_1">conteudo tab 1</div>
		<div id="tab_2" style="display:none">conteudo tab 2</div>
 
		<div id="tab_3" style="display:none">conteudo tab 3</div>
		<div id="tab_4" style="display:none">conteudo tab 4</div>
	</div>
 
</body>
</html>

É só isso, basta rodar que o código já funciona. Com um pouco de CSS e outras personalizações você faz um ótimo menu em abas com pouco código.

Até mais!

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