jquery based progressbar is used to show user current process status.
We can implement this for uploading, downloading, database etc.
related process.All define processes are slow so we must inform user
something is under process.
Situation
We want to display a progressbar for any process on webpage.
Solution
- First identify source (html tag)
- Use following jqueries for implementing this task
- use jquery http://www.programmingduniya.com/common/jquery/jquery.min.js
- use jquery http://www.programmingduniya.com/common/jquery/jquery-ui.min.js
- use css http://www.programmingduniya.com/common/jquery/css/jquery-ui.css
Detailed programme
<html>
<head>
<link
rel="stylesheet" type="text/css"
href="http://www.programmingduniya.com/common/jquery/jquery-ui.css" />
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://www.programmingduniya.com/common/jquery/jquery-ui.min.js">
</script>
</head>
<body>
<div id="progressbar"></div>
<input type="button" onclick="changestatus()" value="see demo"/>
<script>
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
function changestatus()
{
$(document).ready(function() {
var i=0;
for(i;i<=100;i++)
{
$("#progressbar").progressbar({ value: i });
}
});
}
</script>
</body>
</html>
No comments:
Post a Comment