In this post Asp.Net jQuery UI Progress Bar Update Text we
shall see on how to display the % of progress attained by the Progress bar, using
a span tag. The Progress bar control does not support adding text, hence we
will add a span tag and display the status text in the span tag.
On clicking the Run button the java script function UpdateProgressBarText() is called, this method increments the value of the progress bar by 1 for every 10 milliseconds, and also update the current status in the txtProgBar span tag. setTimeout() is used to create the 10 milliseconds delay. The iProgressTextText variable holds the current value to be set to the progress bar, and is incremented every 10 milliseconds.
Click on the Reset button to; bring the progress bar back to the original state. This button resets the value of the progress bar, the txtProgBar span tag and the iProgressText variable back to 0.
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 and the % of progress
is displayed next to progress bar.
On clicking the Run button the java script function UpdateProgressBarText() is called, this method increments the value of the progress bar by 1 for every 10 milliseconds, and also update the current status in the txtProgBar span tag. setTimeout() is used to create the 10 milliseconds delay. The iProgressTextText variable holds the current value to be set to the progress bar, and is incremented every 10 milliseconds.
Click on the Reset button to; bring the progress bar back to the original state. This button resets the value of the progress bar, the txtProgBar span tag and the iProgressText 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 Text
$("#divProgressBarUpdateText").progressbar({
value: 0 });
$("#divProgressBarUpdateText").addClass("barcolor");
$("#txtProgBar").text('0%');
});
//
var iProgressText = 1;
function UpdateProgressBarText()
{
$("#divProgressBarUpdateText").progressbar({value:iProgressText})
$("#txtProgBar").text(iProgressText + '%');
if(iProgressText < 100)
{
iProgressText++;
setTimeout(UpdateProgressBarText, 10);
}
}
function ResetProgressBarText()
{
$('#divProgressBarUpdateText').progressbar({value:0});
iProgressText = 0;
}
</script>
</head>
<body>
<form id="frmSlider" runat="server">
<table>
<tr>
<td>Progress
Bar Update Text</td>
<td><div id="divProgressBarUpdateText"
style="width:200px;"></div>
</td>
<td>
<input
type="button"
value="Run"
onclick="javascript:UpdateProgressBarText();"; />
<input
type="button"
value="Reset"
onclick="javascript:ResetProgressBarText();"; />
<span
id="txtProgBar"
style="width:200px;"
></span>
</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