JS Tutorial
- Overview
- Documents
Loading Bar is a little jQuery plugin that will let you add a Youtube-like loading bar to all your ajax links.
Source: github.com
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" type="text/css" href="loadingbar.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.loadingbar.js"></script>
2. HTML
<a href="YOUR-URL" class="ajax-call">..</a> <div id="loadingbar-frame"></div>
Make sure you change the "YOUR-URL" into the URL you want the script to load.
3. JAVASCRIPT
$(".ajax-call").loadingbar({
replaceURL: false, /* You can visibly change the URL of the browser to reflect the clicked links by toggling this to true. Default is false. May not work in old browsers. */
target: "#loadingbar-frame", /* The container's selector where you want the ajax result to appear. Default is #loadingbar-frame */
direction: "right", /* The direction where the the loading bar will progress. Default is right. */
/* Default Ajax Parameters. */
async: true,
complete: function(xhr, text) {},
cache: true,
error: function(xhr, text, e) {},
global: true,
headers: {},
statusCode: {},
success: function(data, text, xhr) {},
dataType: "html",
done: function(data) {}
});
Note: For options listed under Default Ajax Parameters, simply refer to jQuery.ajax doc for more info.
4. ADVANCED
Sometime you may want each links to have its own ajax command, for example one for POST and another for GET. With this script you can do this by simply following markup rules as shown in the example below:
<a href="http://api.dribbble.com/players/jackietrananh/shots?callback=?" data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>
This example shows how I was able to call the Dribbble's API with a data markup. Simply assign data-target with a selector to define the target container, data-type to define the type of ajax call you want and data-datatype to define the type you want to receive.
