jQuery на основе привязки навигации

Question

Я ищу способ навигации между страницами и реагирования на события, когда якорь меняется с помощью jQuery.Чтобы проиллюстрировать мой вопрос, позвольте мне продемонстрировать на примере:

1. Пользователь заходит на страницу, которая загрузила jQuery, без пользовательского интерфейса jQuery или каких-либо дополнительных плагинов.
2. Какпри загрузке страницы пользователь перенаправляется с http://thesite.com/ на http://thesite.com/#/, без какого-либо обновления страницы.
3. При нажатии на ссылку, подобную этой: <a href="#/author/bio">My Bio</a>.
4. jQuery использует $.ajax() способ загрузки запрошенной страницы без обновления страницы.
5. Пользователь нажимает кнопку возврата браузера и переходит к http://thesite.com/#/, без обновления страницы.

Iхорошо, когда дело доходит до загрузки содержимого страницы.Однако вот что я не знаю:

1. Как мне перенаправить на http://thesite.com/#/, если он не указан при загрузке страницы?
2. Как мне прослушать запроса на загрузку страницы без обновления, когда нажата ссылка с разделителем привязки (#)?
3. Самое главное, как я могу прослушивать запросы браузера вперед / назад,знаете, какую страницу загружать?

Извините за аварийный список вопросов.Если мой сценарий не был достаточно ясным, то вот отличный сайт, который уже делает это: http://grooveshark.com/.

Спасибо за ваше время!Буду щедро награжден за подробные ответы / комментарии.

Answer 1

Ну, вам нужно было бы добавить клик к тегам a.

Тогда все, что вам нужно сделать, это:

$('a').click(function(){

    window.location.hash = this.href;
    //some load of that url to the page
    return false;

});

И для прослушивания изменений хеша вам нужен плагинкак этот

Answer 2

Первая загрузка jquery.

при готовности поменяйте все URL что-то вроде

$('a').forEach(function(obj){
   obj.href=obj.href+"#";
});
// on click load 
$('a').click(function(a){
   ajaxLoad(a);

//push to window.history

});