Реализация History.js

Я пытаюсь реализовать History.js для моего сайта ajax, чтобы использовать кнопки вперед и назад и даже закладки. Однако пример @https://github.com/browserstate/History.js/ меня немного смущает, как его реализовать. У кого-нибудь есть простой учебник или пример того, как его использовать. Пример, который мы можем использовать для запуска примера, - это ссылка на навигацию, например

<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>

Ответы

Ответ 1

Мне не удалось полностью понять, как использовать History.js. Вот несколько кодов из их wiki с моими комментариями для объяснения:

1. Получить ссылку на объект history.js

Чтобы получить ссылку на окно ссылки на объект History.js. История (Capitol 'H').

var History = window.History;

Чтобы проверить, включена ли история HTML5, отметьте History.enabled. History.js все равно будет работать с использованием хэш-тегов, если это не так.

History.enabled

2. Слушайте историю изменений и обновляйте свое представление отсюда

Для прослушивания изменений состояния истории привязывается к событию statechange объекта Adapter.

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

3. Манипулировать состояниями истории, используя push или replace

Чтобы добавить состояние в историю, вызовите pushState. Это добавит состояние в конец стека истории, которое вызовет событие statechange, как показано выше.

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

Чтобы заменить состояние на историю, вызовите replaceState. Это заменит последнее состояние в стеке истории, которое вызовет событие statechange, как показано выше.

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

Разница между pushState и replaceState заключается в том, что pushState добавит состояние в список истории, replaceState перезапишет последнее состояние.

ПРИМЕЧАНИЕ: pushState и replaceState сериализуют объект данных, поэтому используйте минимальные данные.

4. Если вы хотите добавить дополнительный ui для того, чтобы пользователь мог перемещаться по истории, используйте навигационные команды

Вернитесь и перейдите к истории с помощью кода.

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

Дополнительно: использование тегов "a" с историей

Чтобы использовать теги "a" с историей, вам нужно будет перехватить события кликов и предотвратить перемещение браузера с помощью метода event.preventDefault().

Пример:

<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);
})​;

Надеюсь, это поможет.