Ajax.Navigation.js

Getting started

Installation

To use Ajax.Navigation, include the jQuery library (1.8 < X > 3.0 ) and the Ajax.Navigation source files into the head of your HTML document:

<link type="text/css" rel="stylesheet" href="/path/to/files/ajax.navigation.css">

<script type="text/javascript" src="/path/to/files/jquery.js"></script>
<script type="text/javascript" src="/path/to/files/ajax.navigation.js"></script>

Markup

This is an example of a minimal required markup.

<div id="ajaxArea" data-ajax-effect="slide-left">     
    Content goes here... 
</div>

The required attributes are:

  • an id (#ajaxArea in this example) in order to find the correct content inside the loaded one.
  • an effect you want to add (slide-left in this example).

Javascript

To initiate the plugin, call the .ajaxNavigation() plugin method on anchor elements, on which you want to have the functionality.
We have to define one or more areas, whose contents will be changed.

$(".anyAnchorElement").ajaxNavigation({
    areas : "#ajaxArea"
});

Although it is possible to use $("a") as an selector, I do not recommend it.

Head over to Options to see all available configuration options.