16 мая 2012 в 01:53

Навигация по сайту как во ВКонтакте

Ожидает приглашения

Сегодня я вам расскажу как я делал навигацию по сайту как на сайте ВКонтакте: ajax-навигация + обновление адреса страницы.
Код который я написал работает в браузерах FireFox 11+, Chrome 18.0, Opera 11, Safari 5.1. В других версиях и браузерах не проверял.
Кому интересно, приглашаю в продолжение.

Весь код у меня получился небольшой, так как работает на одной команде jQuery.

Подготовка

Создадим пару простых html страниц с разным содержанием. Я создал такие:
one.html

<html>
 <head>
  <title>One</title>
 </head>
 <body>
  <div class="nav"><a href="one.html">One</a> <a href="two.html">Two</a></div>
  <div class="content">
   Первая страница
  </div>
 </body>
</html>

two.html

<html>
 <head>
  <title>Two</title>
 </head>
 <body>
  <div class="nav"><a href="one.html">One</a> <a href="two.html">Two</a></div>
  <div class="content">
   Вторая страница
  </div>
 </body>
</html>

Теперь преступим к главной странице.

index.html

Для начала подключим jQuery:

<html>
 <head>
  <title>Index</title>
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 </head>
 <body>
  <div class="nav"><a href="one.html">One</a> <a href="two.html">Two</a></div>
  <div class="content">
   
  </div>
 </body>
</html>

Добавим функцию, которая будет выполняться при нажатии на ссылки:

  <script>
   $(document).ready(function(){
	$('a').live('click', function(){
		$('.content').load($(this).attr('href') + ' > .content');
		return false;
	});
   });
  </script>

Разберём текущий код:

$('a').live('click', function(){ .. });

Добавляет функцию ко всем ссылкам на странице

return false;

Запрещает переход по ссылке

$('.content').load($(this).attr('href') + ' > .content');

Загружаем новое содержимое в наш документ(загружаем отдельную часть из всего документа)

Уже на текущий момент навигация работает, однако не меняется адрес и заголовок(title) страницы. Давайте добавим их.

Заголовок(title)

Тут всё достаточно просто. Для этого в функцию добавляем:

$('#title').load($(this).attr('href') + ' .title');
$('title').html($('.title').text());

И добавим скрытый блок с id=«title»:

<div class="display: none;" id="title"></div>

Обновляем адрес страницы

Добавляем код в функцию:

var stateObj = { foo: "bar" };
history.pushState(stateObj, $('#title').text(), $(this).attr('href'));

Разберём его:

var stateObj = { foo: "bar" };

Брал отсюда. Зачем нужно — признаюсь не знаю.

history.pushState(stateObj, $('#title').text(), $(this).attr('href'));

Здесь

$('#title').text()

— заголовок в истории,

$(this).attr('href')

— адрес страницы, адрес которой показываем.

Заключение

Для каких типов сайтов нужен данный скрипт? Для онлайн радио, онлайн музыки и прочего, где есть аудио в первую очередь. Потом — личные сообщения. Применения скрипту можно найти много.
Писал вдохновлённый этой статьёй. В моей версии скрипта убраны все минусы, но добавлены новые:

Лишний код
Лишнее использование JS

И некоторые из плюсов перешли в минусы: 3, 4 пункты плюсов выше приведённой статьи.

Конец

На этом конец. Скрипт готов. Если есть неточности или предложения по улучшению и пожелания — пишите пожалуйста в комментариях, буду рад их выслушать.
Пример: демо

Хабы:

Чулан