Links com âncora

[SL4SH 0]

Olá,

 

Estava vendo ultimamente que muitos sites estão utilizando-se de links com âncora, modificando a velha forma de links digamos "estáticos".

 

Ok, âncora é algo teoricamente simples, por exemplo ir para o topo da página ou algo do tipo, mas tenho visto que existe algo mais avançado em questão a âncoras. O que podemos ver no orkut por exemplo na página: http://www.orkut.com.br/Main#Profile?uid=9999999999999999999 ... identificamos a âncora.

 

Outra coisa que vi também foi no site flickr ao abrir uma imagem e clicar pra dar zoom a página não recarrega e o zoom é efetuado, mas aí pude ver que o que é feito é carregar a div de zoom antes e ao clicar no zoom a div carrega sobre a página dando a impressão de que modificou de página sendo que apenas está escondida atrás de uma div preta com a imagem em tamanho maior.

 

Mas onde quero chegar é em algo mais avançado como Grooveshark.com por exemplo. Nele existe o player onde você coloca a música pra tocar e pode ao mesmo tempo procurar por outra, clicar no botão voltar/avançar do browser e a música não para de tocar. Sempre utilizando uma navegação por âncoras.

 

Exemplo no grooveshark:

1. efetuo uma pesquisa:

2. http://listen.grooveshark.com/#/search?q=Guns%20N%20Roses

3. dou play em uma ou duas músicas

4. dou um voltar pra página inicial e a música continua tocando

5. ou realizo outra pesquisa http://listen.grooveshark.com/#/search?q=Nirvana e da a impressão de que a página não recarregou. (é algo bem dinâmico)

 

Então... gostaria de saber se não existe um tutorial, desvendando todos esses segredos e explicando detalhadamente como funciona.

 

Obrigado.

[William Bruno 1501]

qndo você manda a tralha # (ancoras), as requisições são todas feitas para a página atual, sem intervenção do servidor.

 

no caso, para ficar alterando o conteúdo, estão usando ajax.

assim cara... eu não tenho muita paciência de ficar escrevendo tutoriais, e tb nunca precisei ir atrás de tutos tão específicos.

 

Se você aprender o básico bem, consegue desvendar essas coisas, sem precisar ler sobre elas diretamente.

aqui um exemplo do 'history':

http://forum.imasters.com.br/topic/403171-pagina-dentro-de-div-ajax-problema-ao-atualizar/page__view__findpost__p__1581230