Update: Es gibt jetzt die HTML5-Verlaufs-API (pushState, popState), die die HTML4-Funktion hashchange deaktiviert. History.js bietet Cross-Browser-Kompatibilität und optionalhashchange Fallback für HTML4-Browser.
Um den Verlauf einer Seite zu speichern, verwendet der beliebteste und vollständig unterstützte/unterstützte Weg Hashchanges. Dies bedeutet, dass Sie von yoursite/page.html#page1 zu yoursite/page.html#page2 gehen können, um diese Änderung zu verfolgen, und weil wir Hashes verwenden, kann es durch Lesezeichen und Vor- und Zurück-Schaltflächen abgerufen werden.
Sie können eine gute Möglichkeit für Sie zu binden, um die jQuery Geschichte Projekt http://www.balupton.com/projects/jquery-history
Es gibt auch eine voll funktionsfähige AJAX-Erweiterung für sie Hash Änderungen verwenden, so dass Sie leicht Ajax Anfragen an Ihren Staaten integrieren/Hashes Verwandeln Sie Ihre Website in eine voll funktionsfähige Web 2.0-Anwendung:
Sie beide bieten großartige Dokumentation auf ihren Demoseiten, um zu erklären, was passiert und was vor sich geht. Hier
ist ein Beispiel für jQuery Geschichte mit (von der Demo-Seite genommen):
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab, hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
Und ein Beispiel von jQuery Ajaxy (wie aus der Demo-Seite genommen):
'page': {
selector: '.ajaxy-page',
matches: /^\/pages\/?/,
request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request', [this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},
response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
und wenn Sie jemals den Abfragezeichenfolgeflag params erhalten mögen (so yoursite/page.html#page1?a.b=1&a.c=2) Sie können einfach verwenden:
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
Schauen Sie sich diese Demo-Links an, um sie in Aktion zu sehen, und für alle Installations- und Nutzungsdetails.