JSNAV - Навигация по странице

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на Javascript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:

Пользователь кликает по пункту, Javascript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.


Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

Пересылая ссылку из адресной строки браузера другу, пользователь не может быть уверен, откроется ли документ с тем содержимым, что он просматривает сейчас, или откроется документ с начальным содержимым страницы.

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

К примеру:
jqapi.com/#p=jQuery.ajax
jqapi.com/#p=height
jqapi.com/#p=addClass

В этом случае после загрузки страницы по якорю в ссылке можно просто восстановить и показать запрашиваемое содержимое.

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

Чтобы как-то решить эти проблемы к нам в голову с хабраюзером gbezyuk пришла идея создания библиотеки JSNAV, которая помогает решить указанные выше проблемы.

Как это работает?

JSNAV кодирует вызовы Javascript обработчиков в URI документа. Для кодирования используется RFC1630 совместимые URI следующего вида:
user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;...

Cинтаксис якоря страницы:

  • до служебного символа # URI страницы ничем не отличается, от указанного в стандарте, изменения касаются лишь синтаксиса якоря
  • сразу же после # и до символа; идёт обычный HTML якорь со стандартным действием (прокручивание страницы до элемента якоря)
  • после якоря идёт служебный символ; и указывается имя события
  • далее через символ; идёт список параметров, с которыми будут вызваны обработчики событий; параметры закодированы в URL encoding в байтовой кодировке UTF-8

Библиотека после загрузки страницы начинает следить за изменениями URI по переменной window.location.href и, в случае его изменения, вызывает зарегистрированные обработчики.

JSNAV так же поддерживает работу с и обычными якорями: в случае перехода по ссылке с якорем производится scrollTo к элементу якоря. При этом в URI сохраняется описание последнего зарегистрированного события.

Обработчики представляют из себя обычные function объекты, на вход которым передаются декодированные из якоря параметры события.

var addClassHandler = function(className, textId) {
  var elm = textId? document.getElementById(textId) : this;
  if (elm.className && elm.className.indexOf(className) < 0) {
    elm.className += " " + className;
  }
}
JSNAV.bind("addClass", addClassHandler);


Обработчик addClassHandler из примера будет вызываться на URI вида:

  • test.html#;addClass — вызов addClassHandler() в контексте window.document.body
  • test.html#;addClass;className — вызов addClassHandler('className') в контексте window.document.body
  • test.html#;addClass;className;elementId — вызов addClassHandler('className', 'elementId') в контексте window.document.body
  • test.html#anchor;addClass;className — вызов addClassHandler('className') в контексте элемента якоря (элемента с id=='anchor' или name=='anchor') и прокрутка до элемента якоря
JSNAV

Библиотека написана на pure JS и, по идее, не должна конфликтовать ни с одним из известных фреймворков.

Зарепортить ошибку, предложить патч или скачать код можно на сайте проекта. Исходники доступны под Apache2 License.

Посмотреть, как всё это работает можно в примере на этой странице.

Автор материала: ymik



Опубликовал admin
16 Окт, Суббота 2010г.



Программирование для чайников.