Demo
Click here to see jquery.onepage in action
How it works
In the background, whenever a link is clicked, an AJAX call is made to the given url. The body and title of the response replaces those of the current page. The HTML5 history API is used to update the url.
Usage
Include the script after you have included jQuery in the head of the page. Invoke the onepage function.
<head>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.onepage.js"></script>
<script type="text/javascript">
$.onepage();
</script>
</head>
Configuration
An options object can be passed into the function
$.onepage({
configParameter1: configParameterValue1,
configParameter2: configParameterValue2,
.
.
.
});
The following parameters are currently supported:
showLoader
Whether or not a loader element must be displayed while waiting for the response of an AJAX request (default: true).
loaderHtml
If showLoader is set to true, custom loader html can be set here (default: "loading…").
minLoaderTime (ms)
The minimum time that the loader will be displayed. The reasoning behind this is to avoid flickering when the response is very quick. The loader also, however, will never show for responses that come back quicker than 100 milliseconds. (default: 500)
rebind
Callback function that will always execute after a new page's content has been placed in the DOM. Place all existing event bindings in here. (default: function(){})