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.
Jader Rubini escreveu:
14/11/2008 @ 13:11:13Não era mais fácil colocar, na função atribuir, um
Usandonavegar($(this).attr('href')), não?inside escreveu:
14/11/2008 @ 14:11:28Falha nossa, valeu por avisar!
Usandoinside escreveu:
14/11/2008 @ 14:11:28No caso eu coloquei desta forma porque quando usamos includes na navegação sem AJAX a página nem sempre é a mesma, mas neste caso fica melhor colocar o href mesmo.
UsandoMarcelo Coelho escreveu:
17/11/2008 @ 09:11:30Posso carregar codigos HTML + JavaScript?
UsandoEstou procurando essa solução, mas não estou achando.
inside escreveu:
17/11/2008 @ 10:11:37Nunca tentei nada do tipo Marcelo. Talvez a lógica do modo como você está pensando não esteja certa, tente encontrar outra solução mais simples
UsandoMarcelo Coelho escreveu:
18/11/2008 @ 08:11:35A solução que cheguei foi criar um MEGA Arquivo JS com todas as funções JavaScript que utilizarei. Isso é ruim pela demora ao carregar esse arquivo na inicialização(Quando falo em demora digo os meus clientes que ainda usam conexão discada).
UsandoEnviar o pedaço HTML + JavaScript fica mais rápido e mais seguro.
Ainda estou na “caça” dessa solução.
Igor Marlus escreveu:
26/11/2008 @ 09:11:59No exemplo citado, as páginas que são carregadas não possuem caracteres com acento, no caso quando colocamos palavras na nossa lingua as palavras ficam diferentes. Tem alguma solução em jquery para padronizar os caracteres com acentos e ç ??
Usandoinside escreveu:
26/11/2008 @ 10:11:25Igor, basta salvar as páginas no encoding correto (geralmente utilizo UTF-8).
UsandoIgor Marlus escreveu:
27/11/2008 @ 10:11:15Mas… onde eu defino o encoding ?
Usandoinside escreveu:
27/11/2008 @ 11:11:35Igor, isso depende do seu editor, você precisa verificar se o editor está salvando o arquivo com o encoding correto. Dê uma pesquisada a respeito de encodes para entender melhor.
Usando