Showing posts with label jQuery UI Progress Bar. Show all posts
Showing posts with label jQuery UI Progress Bar. Show all posts
Monday, August 6, 2012
Friday, July 13, 2012
Asp.net jQuery UI Progress Event Handler
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
Asp.net jQuery UI Progress Update Text
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
Asp.net jQuery UI Progress Update Value
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.
Asp.net jQuery UI Progress Bar Color
In
this post Asp.Net jQuery UI Progress Bar Color, we shall see on how
to set the Color of the Bar in a jQuery UI Progress Bar control in an
Asp.net page.
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, make sure that you add the style tag to define the barcolor class.
Build and run the applications.
Asp.net jQuery UI Progress Bar Background Color
In
this post Asp.Net jQuery UI Progress Bar Background Color, we shall
see on how to set the Background Color of a jQuery UI Progress Bar control
in an Asp.net page.
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 applications.
<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 Background color
$("#divProgressBarBGColor").progressbar({
value: 50 });
$("#divProgressBarBGColor").css({background:
'#fedcba'});
});
</script>
</head>
<body>
<form id="frmSlider" runat="server">
<table>
<tr>
<td>Progress Bar Change Background color</td>
<td><div
id="divProgressBarBGColor"
style="width:200px;"></div>
</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
Subscribe to:
Posts (Atom)
