jQuery + Ajax Hash / História e mais

Question

Eu estou tentando obter uma alça sobre o uso de hashes de URL em jQuery para a história de controle no Ajax e fazer links / páginas do livro-markable. Eu tentei quase todos os plug-in lá fora, e eu não posso parecem obter qualquer para funcionar corretamente, então eu não tenho nenhum exemplos de código realmente. Mas estou aberto a sugestões, informações, tutoriais, etc.

A diferença em uma das páginas que eu estou tentando incorporar isso em é que eu tenho uma página de carregamento animação jQuery impulsionado respingo /, que também é a mesma página que todo o conteúdo será carregado na.

.. e neste link, eu quero-passar por todo o respingo / animação de carga e carregar diretamente o conteúdo com base nos valores de hash / string (neste caso, #home).

Eu venho tentando descobrir isso por um tempo, qualquer ajuda é muito apreciada, obrigado!

Answer 1

Assim que você está tendo problemas com? Definir o hash tag ou manusear a mudança do hash?

É claro definindo os hashes é simplesmente uma questão de colocar os hashes em links, por exemplo <a href="www.voidsync.com/2010/#page">Link</a> mas eu estou supondo que não é o seu problema.

Para realmente fazer alguma coisa com o hash, você deve ter uma função de ouvinte que os controlos por exemplo a cada 100 ms tem o hash alterado e age em conformidade. A função simples poderia ir como este:

$(function() {
    var current_hash = false;
    setInterval(function() {
        if(window.location.hash != current_hash) {
            current_hash = window.location.hash;
            $('#content').load("content.php?page="+current_hash);
        }        
    }, 100);    
});

Essa função (não testado) iria verificar cada 100ms se o hash mudou, e se ele tem, em seguida, atualiza a página via Ajax.

Esta função também funciona no carregamento da página, por isso, se as terras do usuário na página com um link como www.voidsync.com/2010/#images, a função irá carregar a página 'imagens' automaticamente. Assim, a história e bookmarking obras.

Espero que ajude, apenas perguntar se você quis dizer outra coisa.

Answer 2

Baseado fora a resposta de Tatu, eu só mudou algumas coisas para fazer este trabalho para mim. Ele mantém uma história, então para trás e botões de avançar um bom trabalho. Aqui está o que eu tenho,

$(function() {
var current_hash = false;
setInterval(function() {
    if(window.location.hash != current_hash) {
        current_hash = window.location.hash;
            if(current_hash=='#home'){
                var month = '9';
                var year ='2011';       
                $.ajax({
                    type: "POST",
                    url: "/home.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });                     
            }
            else if(current_hash=='#edit'){
                $.ajax({
                    type: "POST",
                    url: "/edit.php",
                    data: "data+here",
                    success: function(msg){
                        $('#div').html(msg);
                    }       
                });             
            }
    }        
}, 100);

Em seguida, basta atribuir um pouco de haxixe de atribuir as ligações href;

                    <li><a href="#home">Home Page</a></li>
                <li><a href="#edit">Edit Page</a></li>

Não é uma reescrita todo, basicamente só adicionei alguns se declarações à mesma coisa, mas pode ajudar alguém.