2009-11-30 14 views
5

Sto cercando di ottenere un controllo sull'utilizzo degli hash degli URL in jQuery per controllare la cronologia in Ajax e creare collegamenti/pagine da contrassegnare. Ho provato quasi tutti i plug-in là fuori, e non riesco a far funzionare nessuno, quindi non ho esempi di codice. Ma sono aperto a qualsiasi suggerimento, informazione, tutorial, ecc.jQuery + Ajax Hash/Cronologia e altro

La differenza su una delle pagine in cui sto cercando di incorporare questo è che ho una pagina di splash/caricamento guidata da jQuery, che è anche la stessa pagina in cui verrà caricato tutto il contenuto.

..e su questo collegamento, voglio bypassare tutte le animazioni di splash/caricamento e caricare direttamente il contenuto in base ai valori hash/stringa (in questo caso, #home).

Ho cercato di capire questo per un po ', ogni aiuto è molto apprezzato, grazie!

risposta

12

Quindi, con cosa stai avendo problemi? Impostazione del tag hash o gestione della modifica dell'hash?

Ovviamente l'impostazione degli hash è semplicemente una questione di mettere gli hash nei collegamenti, ad esempio <a href="www.voidsync.com/2010/#page">Link</a> ma suppongo che non sia un tuo problema.

Per eseguire effettivamente qualcosa con l'hash, è necessario disporre di una funzione listener che verifica ad esempio ogni 100 ms ha l'hash modificato e agisce di conseguenza. Una funzione semplice potrebbe andare in questo modo:

$(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);  
}); 

Tale funzione (non testato) controllerei ogni 100ms se l'hash è cambiato, e se ha, quindi aggiorna la pagina tramite Ajax.

Questa funzione funziona anche con caricamento della pagina, quindi se l'utente accede alla pagina con un collegamento come www.voidsync.com/2010/#images, la funzione caricherà automaticamente la pagina "immagini". Quindi la storia e il bookmarking funzionano.

Spero che questo aiuti, basta chiedere se intendevi qualcos'altro.

+0

ha fatto un po 'di riformulazione e ha funzionato, funziona anche su tutti i browser recenti e sono riuscito a modificarlo per azzerare lo splash loading, evviva! – abysslogic

+0

, in realtà, è necessario eseguire ancora una riscrittura per rendere i collegamenti bookmarkable e ignorare la pagina iniziale predefinita se l'hash è impostato, ma non mentre le animazioni di caricamento funzionano. – abysslogic

+1

Mente postando la riscrittura abysslogic? – rideon88

1

In base alla risposta di Tatu, ho appena cambiato alcune cose per far funzionare questo lavoro per me. Mantiene una cronologia, quindi i pulsanti Indietro e Avanti funzionano correttamente. Ecco quello che ho,

$(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); 

Poi basta assegnare un certo hash di per i link href;

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

non è un intero riscrittura, appena fondamentalmente aggiunto un po 'se le dichiarazioni per la stessa cosa, ma può aiutare qualcuno.