Для хранения истории страницы, самый популярный и полнофункциональный / поддерживаемый способ - использование хэш-чангов.Это означает, что, скажем, вы переходите от yoursite/page.html#page1 к yoursite/page.html#page2, вы можете отслеживать это изменение, и поскольку мы используем хэши, оно может быть выбрано по закладкам и кнопкам назад и вперед.
Вы можете найти отличноеспособ привязки к изменениям хеша с помощью проекта jQuery History http://www.balupton.com/projects/jquery-history
Для него также имеется полнофункциональное расширение AJAX, позволяющее вам легко интегрировать запросы Ajax в ваши состояния / хеши, чтобы превратить ваш сайт в полноценныйЛучшее приложение Web 2.0: http://www.balupton.com/projects/jquery-ajaxy
Они оба предоставляют отличную документацию на своих демонстрационных страницах, чтобы объяснить, что происходит и что происходит.
Вот пример использования JQuery History (каквзято с демонстрационного сайта):
// 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);
});
И пример jQuery Ajaxy (взятый с демонстрационного сайта):
'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;
А если вы когда-нибудь захотите получить параметры строки запроса(так что yoursite/page.html#page1?a.b=1&a.c=2) вы можете просто использовать:
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
Так что ознакомьтесь с этими демонстрационными ссылками, чтобы увидеть их в действии и узнать все подробности установки и использования.
Изменить: После просмотра вашего кода, это все, что вам нужно сделать, чтобы использовать его с JQuery History.
Изменить:
$('.tabbed_content .tabs li a').live('click',
function (e){
e.preventDefault();
switchTab($(this));
});
На:
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
switchTab(state);
});
Или, если вы планируете использовать jQuery History и для других областей, мы хотели бы убедиться, что мы вызываем switchTab только для наших вкладок, а не для всех хэшей:
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
if ( $('.tabbed_content > .content > li[id='+state+']').length ) switchTab(state);
});
Мы больше не используем событие onclickвместо этого мы привязываемся к jQuery History, так как он обнаружит хэш-обмен.Это самая важная концепция для понимания, так как, например, если мы добавляем сайт в закладки, а затем возвращаемся к нему, мы никогда не нажимаем на него.Таким образом, вместо этого мы меняем наши клики, чтобы привязать к хэш-обмену.Как и когда мы щелкаем по нему, отмечаем его, назад или вперед, хэш-обмен всегда срабатывает: -)