View demoDownloadThe Progress Bar is one of the latest components to be added to the
excellent library of UI widgets and interaction helpers built on top of
jQuery. It was introduced in the latest version of the library, which
at the time of writing is 1.7.
The progress bar is currently only determinate, which means when we
update it, we have to tell it explicitly what its value is, and we must
know beforehand when the process it is used to measure completes. This
widget is not currently the best choice for a process which will take
an indeterminate length of time to complete.
The Underlying Page
Very little underlying mark-up is needed by this widget; all we need,
in addition to the library resources listed above, is a simple
container element. In your text editor, create the following page shell
with the required resources and container element:
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css"> |
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css"> |
<link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css"> |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
<title>jQuery UI Progress Bar</title> |
<div id="container"></div> |
<script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script> |
<script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script> |
<script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script> |
<script type="text/javascript"> |
Save this as progressBar.html in the root jQuery UI directory. We put
the stylesheets right at the start of the file and the scripts right
at the end; this is for performance reasons as pages load the content
quicker when they aren’t trying to load JavaScript at the same time.
This is a well documented performance practice that is best adhered to.
We’ve left an empty script tag at the bottom of the page; let’s add
some code there next:
$("#container").progressbar(); |
Setting the Value of the progress bar
The progress bar’s value will be set to zero by default, which is why
it appears empty in the previous screenshot. To fill the progress
bar, we need to set the value property; change the constructor function
so that it appears as follows:
$("#container").progressbar({ value: 50 }); |
Getting the Value of the Progress Bar
Getting the current value of the widget is as easy as it was to set
it; we can use one of its methods to return the current value property.
After the initial constructor, add the following code:
//set mouseover for progress bar
$("#container").mouseover(function() { |
$("<p>").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body"); |
$("#container").mouseout(function() { |
$("#percentage").remove(); |
});
No comments:
Post a Comment