Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery ui progress bar

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

jquery ui progress bar

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

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

Get value for jQuery progressbar from a select element

jQuery progressbar bound to select

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

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

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.