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

17 Май
2012

Сегодня я вам расскажу как я делал навигацию по сайту как на сайте ВКонтакте: 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 пункты плюсов выше приведённой статьи.

Конец


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



загрузка...

Комментарии:

Наверх