197 Если вы путешествуете в сети с помощью одного из последних браузеров (Safari, Chrome или Firefox 4), то вы наверное заметили некоторые изменения при просмотре деревьев на GitHub.
На всякий пожарный, видео-пример, как работает слайдер дерева на GitHub:
Новый HTML5 History API (который в действительности не имеет ничего общего с HTML — это JavaScript API) позволяет управлять URL, задействуя при этом CSS3 transitions для слайдинга дерева. Поддерживаются постоянные ссылки, работает кнопка «назад». И все это проворачивается конечно быстрее, чем загрузка всей страницы.
Посмотрим рецепт. И так, сначала перехватывается ваш клик вызовом pushState(), который меняет URL в браузере, затем подгружаются данные с помощью Ajax, далее сам эффект слайда.
|
1 2 3 4 5 6 7 |
$('#slider a').click(function() { history.pushState({ path: this.path }, '', this.href) $.get(this.href, function(data) { $('#slider').slideTo(data) }) return false }) |
Когда вы нажимаете кнопку «назад», срабатывает обработчик onpopstate на изменение URL, что позволяет отправить вас «назад».
|
1 2 3 |
$(window).bind('popstate', function(event) { $('#slider').slideTo(location.pathname) }) |
Вам нужно больше информации? Посмотрите HTML History API демо и документацию манипуляции с историей браузера (eng.). На Facebook есть немного информации (eng.) по использованию подобных вещей.
Мы надеемся, что вам понравился слайдер дерева, а дополнительная информация была полезна.
