Navigation

Ajax Navigation controller

This is the extended Navigation controller, customized for the Manipulator Templator Model. This page/flow controller is designed for full rendering control.

dependencies Util.History for browser History and Location control. Seamless fallback to location.hash and Legacy translation between #/ and real url paths for support for links shared between different generation browsers.

In default implementation it is composed of a div#page containing a div#header, a div#footer and a div#content. In the div#content we place our individual page content in a div.scene. When using an AJAX enabled navigation the Manipulator Navigation module forwards popstate and HASH changes to either div#content or div.scene depending on the url fragments. First level changes is redirected to div#content, all others to div.scene.

The module can also be used with custom callback and node.

Functions

Util.navigation

Definition

Name
Util.navigation
Syntax
Void = Util.navigation( JSON _options );

Description

Enables AJAX based navigation request routing, sending first level url changes to page.cN.navigate and all other url changes to page.cN.scene.navigate.

Invoking Util.navigation() adds a flow controller and page.navigate(url) function to your MMM. It also looks for exiting HASH markers (links shared from older browsers) to initiate desired page state.

All AJAX links enabled with Util.clickableElement will automatically be forwarded to page.navigate to complete the internal navigation cycle.

Any link routed through page.navigate will automatically be registered as pageViews if the Google Analytics module is enabled.

Parameters

_options
JSON Optional - additional settings.
Options
callback
Callback function name. Default: page.cN.navigate and page.cN.scene.navigate
node
Callback node. default: page
scope
Initialization scope on setup.

Return values

Void

Examples

No examples

Dependencies

JavaScript
  • location.href
  • location.hash
  • String.match
  • String.replace
Manipulator
  • Util.history
  • Util.init
  • Util.timer

Files

Main file

  • u-navigation.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-navigation.js
desktop_ie11
u-navigation.js
desktop
u-navigation.js
desktop_ie10
u-navigation.js
desktop_ie9
u-navigation.js
desktop_light
u-navigation.js
tablet
u-navigation.js
tablet_light
u-navigation.js
smartphone
u-navigation.js
mobile
not tested
mobile_light
not tested
tv
u-navigation.js
seo
not supported