Недавно я наткнулся на интересный плагин для jQuery: BBQ — Back Button & Query Library.
И решил на ее основе сделать свой плагин для навигации на основе якорей. Задачи, которые я себе ставил:
Результат можно посмотреть здесь. А еще можно почитать чуть подробнее.
UPD: дамы и господа, некоторые жалуются на недоступность странички (403 Forbidden), однако, я ничего такого не вижу. В комментах привели ссылку на рабочий вариант, который можно попробовать, если моя ссылка у вас не заработала: http://vbolshov.org.ru.nyud.net/anchornav/.
Идея была такова: сделать плагин, который превращал бы выбранные посредством селектора ссылки — в «якорные» ссылки, причем чтобы в опциях можно было задать целевой элемент, где должен отображаться контент.
В результате появился плагин, использовать который можно так:
Результат: все ссылки имеют нормальные УРЛы, которые индексируются поисковиками, но загружают контент в нужное место страницы. При этом в контенте могут присутствовать скрипты, которые, скажем, будут изменять title страницы.
Поддержка этаких штучек потребует также кое-каких манипуляций на сервере. Нужно проверить, является ли запрос AJAX-запросом и уже в зависимости от этого выдавать либо полную HTML-страницу, либо только ее кусочек. Таким образом, пользователи с отключенным javascript также смогут без проблем серфить по сайту.
На PHP такую проверку можно сделать примерно так:
Ну вот, как бы и все вроде. Комментарии и пожелания приветствуются.
И решил на ее основе сделать свой плагин для навигации на основе якорей. Задачи, которые я себе ставил:
- нормальная работа ссылок в условиях выключенного javascript (читай — нормальная индексация страниц поисковиками)
- поддержка обычных anchor-ссылок безо всяких дополнительных запросов
- поддержка отображения подгруженного контента в разных областях страницы
Результат можно посмотреть здесь. А еще можно почитать чуть подробнее.
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);
Ну вот, как бы и все вроде. Комментарии и пожелания приветствуются.