In
this post Asp.Net jQuery UI Progress Bar Update Value, we shall see
on how update the value of the progress bar, so that the Progress Bar keeps
moving as the value gets updated.
Add DIV tag to the page and add the below jQuery script. Change the references of the jQuery library files to map to your local path. Build and run the application, click the Run button next to the progress bar, notice that the progress bar starts moving.
Click on the Reset button to; bring the progress bar back to the original state. This button resets the value of the progress bar and the iProgress variable back to 0.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Progress Bar </title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<style type="text/css">
<style type="text/css">
.ui-progressbar.barcolor .ui-progressbar-value
{ background:
lightblue; }
</style>
<script type="text/javascript">
$(document).ready(function() {
// Progress Bar Update Progress Bar
$("#divProgressBarUpdateValue").progressbar({
value: 0 });
$("#divProgressBarUpdateValue").addClass("barcolor");
});
//
var iProgress = 1;
function UpdateProgressBar()
{
$("#divProgressBarUpdateValue").progressbar({value:iProgress})
if(iProgress < 100)
{
iProgress++;
setTimeout(UpdateProgressBar, 10);
}
}
function ResetProgressBar()
{
$('#divProgressBarUpdateValue').progressbar({value:0});
iProgress =
0;
}
</script>
</head>
<body>
<form id="frmSlider" runat="server">
<table>
<tr>
<td>Progress Bar Update Value</td>
<td><div
id="divProgressBarUpdateValue"
style="width:200px;"></div>
</td>
<td>
<input
type="button"
value="Run"
onclick="javascript:UpdateProgressBar();";
/>
<input
type="button"
value="Reset"
onclick="javascript:ResetProgressBar();";
/>
</td>
</tr>
</table>
</form>
</body>
</html>
For a full example covering all possible
scenarios in using a jQuery UI Progress Bar control refer to the post Asp.net jQuery UI Progress Bar Tutorial
Related Posts
No comments:
Post a Comment