Pull to refresh

Якорная навигация на jQuery (graceful degradation)

Reading time 2 min
Views 5.3K
Недавно я наткнулся на интересный плагин для jQuery: BBQ — Back Button & Query Library.

И решил на ее основе сделать свой плагин для навигации на основе якорей. Задачи, которые я себе ставил:
  1. нормальная работа ссылок в условиях выключенного javascript (читай — нормальная индексация страниц поисковиками)
  2. поддержка обычных anchor-ссылок безо всяких дополнительных запросов
  3. поддержка отображения подгруженного контента в разных областях страницы

Результат можно посмотреть здесь. А еще можно почитать чуть подробнее.

UPD: дамы и господа, некоторые жалуются на недоступность странички (403 Forbidden), однако, я ничего такого не вижу. В комментах привели ссылку на рабочий вариант, который можно попробовать, если моя ссылка у вас не заработала: http://vbolshov.org.ru.nyud.net/anchornav/.



Идея была такова: сделать плагин, который превращал бы выбранные посредством селектора ссылки — в «якорные» ссылки, причем чтобы в опциях можно было задать целевой элемент, где должен отображаться контент.

В результате появился плагин, использовать который можно так:
$('a.anchornav').anchornav({
  // это целевой элемент - туда будет загружаться динамический контент
  target: '#content',
  
  // CSS-class, который добавляется целевому элементу на то время, пока идет загрузка содержимого
  loading_class: 'loading',

  // текст, показывающийся в целевом элементе в то время, пока идет загрузка содержимого
  loading_text: 'loading...',

  // CSS-class, который добавляется ссылкам, указывающим на последний загруженный УРЛ
  active_class: 'anchornav-active',

  // пространство имен. Ссылка-якорь, сегенерированная плагином имеет вид #<namespace>:<URL>
  namespace: 'a',

  // должен ли этот экземпляр плагина обрабатывать пустой хэш (он же - анкор).
  // это сделано для того, чтобы при обработке навигационных кнопок
  // back и forward, если пользователь вернулся на исходный УРЛ (без хэша) -
  // подгрузить ему нужный контент.
  // Обычно, имхо, имеет смысл только одному экземпляру назначать эту функциональность.
  handle_empty_anchor: true
});


* This source code was highlighted with Source Code Highlighter.


Результат: все ссылки имеют нормальные УРЛы, которые индексируются поисковиками, но загружают контент в нужное место страницы. При этом в контенте могут присутствовать скрипты, которые, скажем, будут изменять title страницы.

Поддержка этаких штучек потребует также кое-каких манипуляций на сервере. Нужно проверить, является ли запрос AJAX-запросом и уже в зависимости от этого выдавать либо полную HTML-страницу, либо только ее кусочек. Таким образом, пользователи с отключенным javascript также смогут без проблем серфить по сайту.

На PHP такую проверку можно сделать примерно так:
$xmlHttpRequest = filter_input(INPUT_SERVER, 'HTTP_X_REQUESTED_WITH', FILTER_SANITIZE_STRING);


Ну вот, как бы и все вроде. Комментарии и пожелания приветствуются.
Tags:
Hubs:
+37
Comments 42
Comments Comments 42

Articles