Как сделать закладку на страницу или контент, полученный с помощью AJAX?
Похоже, это может быть легко, если мы просто добавим детали к «привязке», а затем воспользуемся маршрутизацией или даже в PHP-коде или Ruby on Rails route.rb, чтобы поймать эту часть, а затем показать контент или страницу. соответственно? (показать всю страницу или ее часть)
Тогда это может быть очень просто? Похоже, именно так это делает facebook. Какие еще хорошие способы сделать это?
Обновление: теперь существует API истории HTML5 (pushState, popState), который не поддерживает функциональность HTML4 hashchange. History.js обеспечивает кроссбраузерность и необязательно hashchange резервный вариант для браузеров HTML4.
Самый популярный и полнофункциональный / поддерживаемый способ хранения истории страницы - это хеш-изменения. Это означает, что, скажем, вы переходите от 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 (взято с демонстрационного сайта):
// 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, вы можете сделать это очень просто. просто используйте плагин ajaxify. он может управлять закладками страниц ajax и многим другим.
Проверьте это, кое-что может вам помочь:
Примечание: все статьи на русском языке, поэтому либо переводите их в Google, либо просто просмотрите код и угадайте детали.
Пробовал много пакетов. Плагин jQuery History кажется наиболее полным:
http://github.com/tkyk/jquery-history-plugin
