In
this post Asp.Net jQuery UI Progress Bar Event Handler we shall see
on how to handle the events which are exposed by the Progress Bar control.
The Progress bar supports the events
create, change and complete, here we shall see on how to handle the change and
complete events.
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 current value of the progress bar is displayed in a message box.
<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,
change:
function(event, ui)
{
alert('Progress
Bar position: ' + $(this).progressbar('value'));
},
complete: function(event, ui)
{
alert('Progress Bar Completed');
$(this).progressbar( "destroy"
);
}
});
$("#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