In this article I present how you could use the Progress Bar provided by JQuery.
First of all, you’ll need JQuery UI. Don’t forget to create a theme that matches the colors of the site you are working on.
When you’ve done that, you’ll be able to download your custom version of JQuery UI.
Now, in the head element of the page where you want to put the progress bar, you’ll need to link the JavaScript and the CSS provided by JQuery.
<link type="text/css" href="jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
In this case, I put the files under the jquery-ui-1.7.2.custom directrory under the project directory I’m working on.
Let’s pretend that we building the site in ASP 3.0 and that we need to build a table from a big Dictionary. We also want to give some feedback to our users by providing a progress bar while the page is loading.
So to do that, we’ll need to present the progress bar at is initial state.
<!-- I create the div for the progress bar. -->
<div id="progressbar"></div>
<!-- I initialize the progress bar. -->
<script type="text/javascript">
var cpt = 0
$("#progressbar").progressbar({
value: cpt
});
</script>
<!-- I flush the response so the browser show the progress bar before the page is completely loaded. -->
<%Response.Flush%>
We can now build our table while providing some feedback to the user.
<table>
<%
dim orders : set orders = getAllOrders
dim orderNumber
for each orderNumber in orders
%>
<tr>
<td>
<!-- Print some infos about the order -->
</td>
</tr>
<!-- Now I need to update the Progess bar to show that the information is comming soon. -->
<script type="text/javascript">
// How many items do we have in the dictionary?
var count = '<%=orders.count%>';
// Let's calculate the work we done so far.
cpt += 1;
var value = cpt * 100 / count;
// And we update the progress bar.
$("#progressbar").progressbar('value', value);
</script>
<!-- Let's tell the browser that we want to show the update. -->
<%Response.Flush %>
<%next%>
</table>
Finally, when the page is loaded, we don’t need the progress bar anymore.
<script type="text/javascript">
$("#progressbar").hide('slow')
</script>
Now that you’re done, you could take some time to try the demos to see all the cool stuffs you could do with JQuery UI.
Cheers :-)
