1 | Getting Started |
2 | Design Overview |
3 | Page Controller Boot Process |
4 | Your First App |
5 | Page Controller |
6 | Modules |
7 | Components |
8 | jqcEmpty |
9 | jqcLabel |
10 | jqcButton |
11 | jqcLayer |
12 | jqcPanelDeck |
13 | jqcAccordion |
14 | jqcProgressBar |
15 | Data Binding & Remote Data Synchronization |
16 | jqcDataService |
17 | jqcDataModel |
18 | jqcViewModel |
19 | jqcList |
20 | jqcTable |
21 | jqcForm |
22 | jqcResponsiveLayoutManager |
23 | jqcTreeList |
24 | Demos |
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.
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.
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.
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() ) |
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.