Navigation history at the single html page. Part 2

At the previous post we discovered anchor cheat.

How can we work with it?

My favorite javascript framework is JQuery.

JQuery hides browser-specific behavior, allows to run complex queries to the DOM, has many plugins.

It is right to include script from well-known CDN, for example Microsoft CDN

We will need BBQ jquery plugin. It provides interface to work with anchors (pushState, getState, removeState).

Main idea is that URL must define visual state of the page.

All toggle events must alter BBQ state and do not touch DOM. BBQ state will be changed from this events, or from history or just user input and will define corresponding visual state.

If we want to achieve such behavior we must bind on window object at the document ready event for "hashchange" event.

We can read written anchor with function getState and restore visual DOM state.

Do not forget to invoke $(window).trigger('hashchange'); at the document ready event, to setup initial view.

Example provided.