Implementazione di History.js

Question

Sto cercando di implementare History.js per il mio sito ajax in modo da poter utilizzare i pulsanti avanti e indietro e persino i segnalibri. Tuttavia l'esempio @https://github.com/browserstate/History.js/ mi ha un po 'confuso su come implementarlo. Qualcuno ha un semplice tutorial o un esempio su come usarlo. Un esempio si può utilizzare per avviare l'esempio è un collegamento di navigazione come ad esempio

<script type="text/javascript"> 
window.onload = function() 
{ 
function1(); 
}; 

<ul> 
<li><a href="javascript:function1()">Function1</a></li> 
<li><a href="javascript:function2('param', 'param')"</a></li> 
</ul> 

Answer 1

Fare riferimento a questa domanda: Implementing "Back button" on jquery ajax calls

Alcuni ulteriori informazioni relative al RSH

How to implement RSH (Really Simple History) for Ajax History Back Button

Answer 2

I ha avuto problemi a comprendere appieno come utilizzare History.js. Ecco il codice da loro wiki con i miei commenti per visualizzare la spiegazione:

1. Ottenere un riferimento alle history.js oggetto

Per ottenere un riferimento alle History.js oggetto di riferimento window.history (Capitol 'H').

var History = window.History; 

Per verificare se la cronologia HTML5 è abilitata, selezionare History.enabled. History.js funzionerà ancora usando i tag hash, se non lo è.

History.enabled 

2. Ascoltare per le modifiche di storia e di aggiornare il vostro vista da qui

Per ascoltare per la storia cambiamenti di stato si legano alla manifestazione stateChange dell'oggetto adattatore.

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    History.log(State.data, State.title, State.url); 
}); 

3. Manipolare gli stati della cronologia utilizzando push o sostituire

Per aggiungere uno stato alla storia, chiamare pushState. Questo aggiungerà uno stato alla fine dello stack della storia che attiverà l'evento 'statechange' come mostrato sopra.

History.pushState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

Per sostituire uno stato nella cronologia, chiamare replaceState. Questo sostituirà l'ultimo stato nella cronologia che attiverà l'evento 'statechange' come mostrato sopra.

History.replaceState({data:"any kind of data object"}, "State Title", "?urlforthestate=1"); 

La differenza tra pushState e replaceState è che pushState aggiungerà uno stato alla cronologia, replaceState sovrascriverà l'ultimo stato.

NOTA: pushState e replaceState serializzano l'oggetto dati, quindi utilizzare i dati minimi lì.

4. Se si desidera aggiungere ulteriori ui per l'utente sia in grado di navigare la storia, utilizzare i comandi di navigazione

Usa indietro e andare a navigare la storia tramite codice.

History.back(); 
History.go(2); 

aggiuntive: L'utilizzo di "un" tag con la storia

di usare "un" tag con la storia sarà necessario intercettare cliccare eventi e prevenire il browser da navigare utilizzando l'event.preventDefault () metodo.

Esempio:

<a href="dogs/cats" title="Dogs and cats">Dogs and Cats</a> 

$('a')​.click(function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var title = $(this).attr('title'); 
    History.pushState({data:title}, title, url); 
})​; 

Spero che questo aiuta.