Jsnav

Page navigation

More and more often, websites that use navigation written in JavaScript appear on the web. A typical case of using javascript for navigation is a page with a menu and a block of content, where content is loaded via AJAX:



The user clicks on the item, JavaScript loads the content from the network, inserts content into the block, the user is satisfied: the page shows the required content without reloading and the traffic required is less due to the fact that it did not take to load all these HEAD, BODY, STYLE and other elements.
')
But here's the problem: the page URL. If the old scool sites show a new HTML page for each menu item, and the user has a sane URI, which he can copy from the address bar of the browser, send to a friend or bookmark, then in the case of AJAX interfaces, the URI page often has no links to current document content.

When sending a link from the browser's address bar to a friend, the user cannot be sure whether the document will open with the content that it is currently viewing, or the document with the initial content of the page will open.

It is not a secret that to solve this problem, many programmers encode the link to the currently viewed content into an anchor of the document. For example, on jqapi.com (the screenshot of which is shown at the beginning of the topic), when choosing a menu item, the anchor of the page changes to # p = {contentId}.

For example:
jqapi.com/#p=jQuery.ajax
jqapi.com/#p=height
jqapi.com/#p=addClass

In this case, after loading the page by anchor in the link, you can simply restore and show the requested content.

Unfortunately, at the moment everyone is inventing their own bikes to solve the problem of coding at anchor the current contents of the document. There is no single standard for coding anchors. In addition, developers often forget what the anchors were originally used for and deprive the user of the ability to navigate within the document.

In order to somehow solve these problems, the idea of ​​creating a JSNAV library, which helps to solve the above problems, came to us with the gbezyuk habrauser .

How it works?

JSNAV encodes calls to JavaScript handlers in a document URI. For encoding, RFC1630 uses compatible URIs of the following form:
user:pass@host:port/path/resource?query#anchor;navEventName;param1;param2;...

Page anchor syntax:

• before the service character # URI of the page is no different from that specified in the standard, the changes concern only the syntax of the anchor
• immediately after the # and before the character; There is a normal HTML anchor with a standard action (scrolling the page to the anchor element)
• after the anchor comes the service symbol; and indicate the name of the event
• further through the symbol; there is a list of parameters with which event handlers will be called; parameters encoded in URL encoding in UTF-8 byte encoding

The library, after loading the page, begins to monitor changes in the URI by the window.location.href variable and, if changed, calls registered handlers.

JSNAV also supports work with normal anchors: in the case of a link with an anchor, scrollTo is produced to the anchor element. At the same time, the description of the last registered event is saved in the URI.

Handlers are ordinary function objects, to the input of which event parameters decoded from an anchor are passed.

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);


The addClassHandler handler from the example will be called on the URI of the form:

• test.html #; addClass - call addClassHandler () in the context of window.document.body
• test.html #; addClass; className - call addClassHandler ('className') in the context of window.document.body
• test.html #; addClass; className; elementId - call addClassHandler ('className', 'elementId') in the context of window.document.body
• test.html # anchor; addClass; className — calling addClassHandler ('className') in the context of the anchor element (element with id == 'anchor' or name == 'anchor') and scrolling to the anchor element

Jsnav

The library is written in pure JS and, in theory, should not conflict with any of the known frameworks.

You can report a bug, suggest a patch, or download the code on the project website . Sources are available under the Apache2 License.

See how it all works in the example on this page .

PS

I will be glad to hear comments, suggestions, get bug reports. In addition, I invite everyone to join the development of code and documentation.