Suggested Videos
Part 80 - jquery range slider
Part 81 - jquery tooltip widget
Part 82 - jquery tooltip from database
In this video we will discuss jQuery progressbar widget.
2 simple steps to get the jQuery progressbar
Step 1 : Include a div element with an id on the page
Step 2 : Find the div element in the DOM and call progressbar() function
There are 2 types of progressbars
1. Determinate progress bar - Use when the actual status can be accurately calculated
2. Indeterminate progress bar - Use to provide user feedback when the actual status cannot be calculated
To get a determinate progress bar, set the value option of the progressbar() function to an integer value between 0 and the max.
To get an indeterminate progress bar, set the value option of the progressbar() function to false (boolean)
$('#progressbar').progressbar({
value : false
});
Get value for jQuery progressbar from a select element
HTML
jQuery
Display jQuery progress bar value
HTML
jQuery
Part 80 - jquery range slider
Part 81 - jquery tooltip widget
Part 82 - jquery tooltip from database
In this video we will discuss jQuery progressbar widget.
2 simple steps to get the jQuery progressbar
![jquery ui progress bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneCrHC0Ti-OW1tXDw9sdeOHPKuRmV3n-xLbgHaSanwiz7KxadFECIuQm4XdDp4HniBmV77zc7wmqf2TZOs1KcncX-o1hiIKbE4gKX5r8ZkTIk8Y04jyrZPeoEtXfiZSKeCAkSrI4RhMc/s1600/jquery+ui+progress+bar.png)
Step 1 : Include a div element with an id on the page
<div id="progressbar"></div>
Step 2 : Find the div element in the DOM and call progressbar() function
$('#progressbar').progressbar();
There are 2 types of progressbars
1. Determinate progress bar - Use when the actual status can be accurately calculated
2. Indeterminate progress bar - Use to provide user feedback when the actual status cannot be calculated
To get a determinate progress bar, set the value option of the progressbar() function to an integer value between 0 and the max.
$('#progressbar').progressbar({
value: 65
});
![jquery ui progress bar example](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkosSIhBEura0IhwHWlKkKHwBxuZ_hwvsqOjPRPWIZlUR1TJ3C-qoWQDGiN27YrrFMDIYEGSbql4LgUVL2cqhNWyE30KVljckp1Ieu907Idx2_eICkVelaXiWNE2XBStX2uivGYESg3Og/s1600/jquery+ui+progress+bar+example.png)
To get an indeterminate progress bar, set the value option of the progressbar() function to false (boolean)
$('#progressbar').progressbar({
value : false
});
![jquery ui indeterminate progress bar](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlajEdeEFIHLiRG_JUlCPzDAolRkvFzIm30ctRVHmIbPOAvGl19SFuo22k82GvBGFn9DbFb8xwDhapIMRWQNH4fyG_KUgjSii3GUufKA-NGXpYcONOWnIVri1_4iq95CiW7NMvhzKsPIg/s1600/jquery+ui+indeterminate+progress+bar.png)
Get value for jQuery progressbar from a select element
![jQuery progressbar bound to select](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhipkQKVj_r1-CT3RrFRVsSyP7oWDYfNyZk4WD0yr9O4h6bqkx2mc6tf4uC3nZRnLh_USdYdWAljQtkcK7kxGGz0nrxm-ecrrpKJPowzxzqD7aKZFrRID6vOU5B-lUUFOfsyse6lKr4fmI/s1600/jQuery+progressbar+bound+to+select.png)
HTML
Select
Percentage :
<select id="ddlPercentage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<input type="button" id="btn" value="Set
Value" />
<br /><br />
<div id="progressbar"></div>
jQuery
$(document).ready(function () {
var progressbarDiv = $('#progressbar');
progressbarDiv.progressbar();
$('#btn').click(function () {
progressbarDiv.progressbar({
value: parseInt($('#ddlPercentage').val())
});
});
});
Display jQuery progress bar value
![jquery ui progress bar with text](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggvAcA6-cy81Mn1guSedQSpihMdEZV4BofFtpvp37vWXPzp-C9Qso1g0P2B7SZrCBc24A8wpaEEtyEHiZLVkuiJgKnyX0gV7quQEwZ-7qpJaQIuJKw71Y-Aq4dQYj4DtkJkpXStavDB4I/s1600/jquery+ui+progress+bar+with+text.png)
HTML
Select
Percentage :
<select id="ddlPercentage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
<input type="button" id="btn" value="Set
Value" />
<br /><br />
<div id="progressbar" style="position: relative">
<span style="position: absolute; left: 50%; top: 20%" id="progressBar-label">
</span>
</div>
jQuery
$(document).ready(function () {
var progressbarDiv = $('#progressbar');
progressbarDiv.progressbar();
$('#btn').click(function () {
progressbarDiv.progressbar({
value: parseInt($('#ddlPercentage').val()),
change: function () {
$('#progressBar-label').text(progressbarDiv.progressbar('value') + '%');
}
});
});
});
![jQuery tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGbPh9ed4-oYnlQB_HmpxQOp9BQOcdBzY7319yMzZXAcxxni3AejPQpqdsyYxFsQgr7k3WLoBxGp0TwphNMspFXB466KpbIu9IdLvnGeNV8PW60OsPx1iDKbDcFNZJgI_UySn1ApR9vQ/s1600/jquery+tutorial.png)
Sir why progressbar is not shoing in html page ??? can u explain me
ReplyDelete