The jQuery UI library provides a useful Progress bar control which can be plugged in into out forms, the jQuery UI Progress Bar can be used to display a waiting status to the users, when
a time consuming operation is in progress.
In the following example I have tried to cover all the possible scenarios which we come across while using a Progress bar control.
Running
the sample
To run the sample at your desk, create a
new Asp.net page; copy the entire code below, change reference of the jQuery
& jQuery UI files to point to your local directory. Build and run the
application, see the behavior of each of the Progress bar controls.
Code:
<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">
.ui-progressbar.barcolor
.ui-progressbar-value { background: lightblue;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Simple
Progress Bar
$("#divSimpleProgressBar").progressbar();
//
//
Progress Bar Set Values
$("#divProgressBarSetValue").progressbar({
value: 50 });
//
//
Progress Bar Background color
$("#divProgressBarBGColor").progressbar({
value: 50 });
$("#divProgressBarBGColor").css({background:
'#fedcba'});
//
//
Progress Bar Bar-color
$("#divProgressBarColor").progressbar({
value: 50 });
$("#divProgressBarColor").addClass("barcolor");
//
//
Progress Bar Update Progress Bar
$("#divProgressBarUpdateValue").progressbar({
value: 0 });
$("#divProgressBarUpdateValue").addClass("barcolor");
//
//
Progress Bar Update Progress Bar Text
$("#divProgressBarUpdateText").progressbar({
value: 0 });
$("#divProgressBarUpdateText").addClass("barcolor");
$("#txtProgBar").text('0%');
});
//
var
iProgress = 1;
function
UpdateProgressBar()
{
$("#divProgressBarUpdateValue").progressbar({value:iProgress})
if(iProgress
< 100)
{
iProgress++;
setTimeout(UpdateProgressBar,
10);
}
}
function
ResetProgressBar()
{
$('#divProgressBarUpdateValue').progressbar({value:0});
iProgress = 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="frmProgressBar" runat="server">
<table width="650">
<tr>
<td>Simple
Progress Bar</td>
<td>
<div id="divSimpleProgressBar"
style="width:200px;"
class="ui-progressbar ui-widget
ui-widget-content ui-corner-all"></div>
</td>
</tr>
<tr>
<td>Progress
Bar Set Value</td>
<td><div id="divProgressBarSetValue"
style="width:200px;"></div>
</td>
</tr>
<tr>
<td>Progress
Bar Get Value</td>
<td><input
type="button"
value="Get Current Position" onclick="alert($('#divProgressBarSetValue').progressbar('value'))";
/>
</td>
</tr>
<tr>
<td>Progress
Bar Change Background color</td>
<td><div id="divProgressBarBGColor"
style="width:200px;"></div>
</td>
</tr>
<tr>
<td>Progress
Bar Change Bar color</td>
<td><div id="divProgressBarColor"
style="width:200px;"></div>
</td>
</tr>
<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>
<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>
Related Posts
No comments:
Post a Comment