jqcProgressBar

This document matches version 1.6.0 .

The jqcProgressBar component is used to display progress bars in your HTML page. It does so by nesting one div element inside another div element, and set the width of the inner div according to the progress set on the component.

The jqcProgressBar will calculate the width of the inner div as

width = outerDivWidth * ( value / maxValue )

Thus, the closer the value of the progress bar is to the maxValue, the more full the progress bar will appear.

jqcProgressBar Example

Here is a jqcProgressBar example:

<div id="progressBar" jqc-type="jqcProgressBar"
    style="width: 300px; border: 1px solid #cc0000; height: 25px;">
    <div style="background-color: #ff0000; height: 25px;"></div>
</div>

<span jqc-module="bootModule"></span>

<script>

    function bootModule() {
        var bootModule = {};

        bootModule.postConfigure = function() {
            var components = bootModule.jqc.pageController.components;
    
            components.progressBar.maxValue(100);
            components.progressBar.value(57);
        }

        return bootModule;
    }

</script>

This example creates a jqcProgressBar component and sets its max value to 100 and its current value to 57.

Styling the Progress Bar

The jqcProgressBar component does not style the div elements used to display the progress bar. You will have to do that yourself. In the example in the previous section you can see how to do that with border and background color.

Functions

The jqcProgressBar has the following functions you can call:

Function	Description
maxValue(maxValue)	Sets the maximum value the progress bar can have. (Before version 0.8.2 this function was called setMaxValue())
value(value)	Sets the progress value of the progress bar. (Before version 0.8.2 this function was called setValue())

Target Elements

You can associate a jqcProgressBar component with a div element which has another div element nested inside it. You will have to style the progress bar div elements yourself using CSS.

Next:   Data Binding & Remote Data Synchronization