x
 
Рома Романов
29 марта 2012

Задаю популярный среди новичков вопрос Артёму Поликарпову.

Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново, а просто выскакивало новое содержание без перезагрузки. Как это работает, можно посмотреть на сайте chopapp.com, кликнув на «Would you like to know more?»



Самая простая и пуленепробиваемая техника — использовать плагины вроде jquery.history.js.

Покажу на примитивном примере (эффектные анимации оставим для другой беседы). Есть что-то вроде галереи, где каждый кадр — якорная ссылка на следующий:

<div class="gallery" id="gallery">
  <a id="1" href="#2" style="display: block;">1</a>
  <a id="2" href="#3">2</a>
  <a id="3" href="#1">3</a>
</div>

Функция $.history.init() следит за изменениями якоря, а $.history.load() изменяет его. Скрипт, оживляющий галерею выглядит так:

$(function(){
  var gallery = $('#gallery');
  var frame = $('a', gallery);

  var changeFrame = function(hash) {
    if(hash != '') {
      var activeFrame = $('#' + hash).show();
      if (activeFrame.size()) frame.not(activeFrame).hide();
    } else {
      frame.eq(0).show().siblings().hide();
    }
  };

  // Слежу за изменениями хеша
  $.history.init(changeFrame);

  frame.click(function(e) {
    e.preventDefault();
    var hash = $(this).attr('href').replace('#', '');
    // Изменяю хеш и добавляю запись в историю
    $.history.load(hash);
  });
});

Результат:



После нескольких кликов можно перематывать кадры браузерными кнопками «назад» и «вперёд». При перезагрузке отображается тот кадр, на котором остановились.

Так же работает страница про Командор 2.0.

Если записывать каждый шаг в историю не нужно, лучше отказаться от плагинов, и воспользоваться методом document.location.replace():

Пример без сохранения истории


В некоторых случаях хватит и вовсе одного ЦСС. Псевдо-класс target позволяет управлять стилями элементов, чей айди совпадает с хешем в адресной строке. Например:

.gallery A {
  display: none;
}
.gallery A:target {
  display: block;
}

Недостаток этого способа в том, что браузер ещё и скролит страницу к якорю:

Пример c target


Чтобы отключить паразитный скрол, я сделал якорями невидимые элементы, которые через тильду ~ сообщают о своём состоянии соседям — видимым кадрам.

Разметка изменилась так:

<div class="gallery" id="gallery">
  <div id="i1" class="pseudo-target"></div>
  <div id="i2" class="pseudo-target"></div>
  <div id="i3" class="pseudo-target"></div>

  <a rel="i1" href="#i2" style="display: block;">1</a>
  <a rel="i2" href="#i3">2</a>
  <a rel="i3" href="#i1">3</a>
</div>

ЦСС:

.gallery .pseudo-target {
  display: none;
}

#i1:target ~ A[rel=i1],
#i2:target ~ A[rel=i2],
#i3:target ~ A[rel=i3] {
  display: block;
}

Пример с якорями-посредниками


В ИЕ тильда поддерживается с 7-й версии, target — только с 9-й.

Наконец, можно манипулировать историей браузера с помощью методов объекта history. Здесь диезик #, предназначенный для исключительно якорной навигации, не нужен — адресная строка может принимать любой вид.

Базовое использование очень схоже с jquery.history.js: $.history.init(onHashChange) заменяется на window.onpopstate = onHashChange, $.history.load() — на history.pushState().

Пример с history


Такой метод хорош для построения архитектуры сложных сайтов без перезагрузки между страницами.


Manipulating History for Fun & Profit

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Артур Мудрик
29 марта 2012

Хеши уже устарели, нужно юзать нормальную запись — http://site.ru/news/, где любую часть пути (path) можно динамически изменить на что угодно. Для этого в современных браузерах есть соответствующий функционал. Плагин History.js (https://github.com/balupton/History.js/) очень хорош — и path изменит динамически, и hash изменит.

Ярослав Маркин
31 марта 2012

https://github.com/defunkt/jquery-pjax


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сайты для слабовидящих 2 За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 С чего начать изучение ЦСС? 1 Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5




Недавно всплыло

Поделитесь соображениями, как работать, путешествуя 8 1 Как написать хорошее резюме? 7 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5