jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <meta name="keywords" content="jQuery, Progress, Progress Bar, Progress Widget, jqxProgressBar" /> <meta name="description" content="This page represents the help documentation of the jqxProgressBar widget." /> <title>jqxProgressBar API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>animationDuration</span> </td> <td> <span>Number</span> </td> <td>300 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines the duration of the progressbar's animation. </p> <h4>Code examples</h4> <p> Set the <code>animationDuration</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({ animationDuration: 0 });<code></code></pre> <p> Get the <code>animationDuration</code> property. </p> <pre><code>var animationDuration = $('#jqxProgressBar').jqxProgressBar('animationDuration'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pcLLb/">animationDuration is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>colorRanges</span> </td> <td> <span>Array</span> </td> <td> [] </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines different color segments. </p> <h4>Code examples</h4> <p> Set the <code>colorRanges</code> property. </p> <pre><code> $('#jqxProgressBar').jqxProgressBar({ colorRanges: [ { stop: 20, color: '#F4D1D1' }, { stop: 70, color: '#FF00FF' } ] }); </code></pre> colorRanges Properties: <ul> <li>stop - each one color start from zero to particular position. With decimal number is set a concrete stop. Possible values from ProgressBar's min to max.</li> <li>color - color of this segment.</li> </ul> <p> Get the <code>colorRanges</code> property. </p> <pre><code>var colorRanges = $('#jqxProgressBar').jqxProgressBar('colorRanges');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pp1jrtak/">set custom colorRanges</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines whether the progress bar is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({disabled:true});<code></code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxProgressBar').jqxProgressBar('disabled'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JKTXg/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>height</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the progress bar's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({height:"100px" });<code></code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxProgressBar').jqxProgressBar('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/uW5Cr/">height is set to 20</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>layout</span> </td> <td> <span>String</span> </td> <td>"normal" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxProgressBar's layout. </p> <b>Possible Values:</b> <br /> <pre><code>'normal'</code></pre> <pre><code>'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)</code></pre> <h4>Code examples</h4> <p> Set the <code>layout</code> property. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar({ layout: "reverse" }); </code></pre> <p> Get the <code>layout</code> property. </p> <pre><code>var layout = $('#jqxProgressBar').jqxProgressBar('layout'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SWRA9/">layout is set to 'reverse'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>max</span> </td> <td> <span>Number</span> </td> <td>100 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the progress bar's max value. </p> <h4>Code examples</h4> <p> Set the <code>max</code> property. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar({ max: 150 });</code></pre> <p> Get the <code>max</code> property. </p> <pre><code>var max = $('#jqxProgressBar').jqxProgressBar('max');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gSsd8/">max is set to 150</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>min</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the progress bar's min value. </p> <h4>Code examples</h4> <p> Set the <code>min</code> property. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar({ min: 10 });</code></pre> <p> Get the <code>min</code> property. </p> <pre><code>var min = $('#jqxProgressBar').jqxProgressBar('min');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jrHsy/">min is set to 10</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>orientation</span> </td> <td> <span>String</span> </td> <td>'horizontal' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the orientation. </p> <b>Possible Values:</b> <br /> <pre><code>'vertical'</code></pre> <pre><code>'horizontal'</code></pre> <h4>Code examples</h4> <p> Set the <code>orientation</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({orientation: "vertical" });<code></code></pre> <p> Get the <code>orientation</code> property. </p> <pre><code>var orientation = $('#jqxProgressBar').jqxProgressBar('orientation');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ueWvv/">orientation is set to 'vertical'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span51'>rtl</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p> <h4>Code example</h4> <p> Set the <code>rtl</code> property. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxProgressBar').jqxProgressBar('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/YXXKh/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>showText</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the visibility of the progress bar's percentage's text. </p> <h4>Code examples</h4> <p> Set the <code>showText</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({showText:true});<code></code></pre> <p> Get the <code>showText</code> property. </p> <pre><code>var showText = $('#jqxProgressBar').jqxProgressBar('showText'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tKrwD/">showText is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span86'>template</span> </td> <td> <span>String</span> </td> <td>'default' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Determines the template as an alternative of the default styles. </p> <b>Possible Values:</b> <br /> <pre><code>'default' - the default template. The style depends only on the "theme" property value.</code></pre> <pre><code>'primary' - dark blue style for extra visual weight.</code></pre> <pre><code>'success' - green style for successful or positive action.</code></pre> <pre><code>'warning' - orange style which indicates caution.</code></pre> <pre><code>'danger' - red style which indicates a dangerous or negative action.</code></pre> <pre><code>'info' - blue button, not tied to a semantic action or use.</code></pre> <h4>Code examples</h4> <p> Set the <code>template</code> property. </p> <pre><code>$("#jqxProgressBar").jqxProgressBar({ template: 'primary'});</code></pre> <p> Get the <code>template</code> property. </p> <pre><code>var template = $('#jqxProgressBar').jqxProgressBar('template');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/q31yy6s4/">template is set to 'success'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: <ul> <li>Include the theme's CSS file after jqx.base.css.<br /> The following code example adds the 'energyblue' theme. <pre><code> <pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre> </code></pre> </li> <li>Set the widget's theme property to 'energyblue' when you initialize it. </li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LpTmH/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>value</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100). </p> <h4>Code examples</h4> <p> Set the <code>value</code> property. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar({ value: 100});</code></pre> <p> Get the <code>value</code> property. </p> <pre><code>var value = $('#jqxProgressBar').jqxProgressBar('value');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BzEWx/">value is set to 50</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>width</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the progress bar's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre>$('#jqxProgressBar').jqxProgressBar({width:"250px" });<code></code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxProgressBar').jqxProgressBar('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/99gEX/">width is set to 200</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>complete</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the value is equal to the max. value. </p> <h4>Code examples</h4> <p> Bind to the <code>complete</code> event by type: jqxProgressBar. </p> <pre><code>$('#jqxProgressBar').on('complete', function (event) { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Q9ybm/">Bind to the complete event by type: jqxProgressBar.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>invalidvalue</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the user enters an invalid value( value which is not Number or is out of the min - max range. ) </p> <h4>Code examples</h4> <p> Bind to the <code>invalidvalue</code> event by type: jqxProgressBar. </p> <pre><code>$('#jqxProgressBar').on('invalidvalue', function (event) { // Some code here. });</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Va4rN/">Bind to the invalidvalue event by type: jqxProgressBar.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>valueChanged</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the value is changed. </p> <h4>Code examples</h4> <p> Bind to the <code>valueChanged</code> event by type: jqxProgressBar. </p> <pre><code>$('#jqxProgressBar').on('valueChanged', function (event) { var value = event.currentValue; });</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jMS2X/">Bind to the valuechanged event by type: jqxProgressBar.</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span37'>actualValue</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the progress bar's value. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>value</em></td> <td>Number</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>actualValue</code> method. </p> <pre><code>//@param Number</code></pre> <pre><code>$('#jqxProgressBar').jqxProgressBar('actualValue', 50); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZKTCV/">changes the value in the jqxProgressBar.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span68'>destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Destroys the widget. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>destroy</code> method. </p> <pre><code>$('#jqxProgressBar').jqxProgressBar('destroy'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cUWqp/">destroys the jqxProgressBar.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span59'>val</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the value. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>value</em></td> <td>Number</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>Number</em> </div> <h4>Code example</h4> <p> Invoke the <code>val</code> method. </p> // Get the value. <pre><code>var value = $("#jqxProgressBar").jqxProgressBar('val');</code></pre> // Get the value using jQuery's val() <pre><code>var value = $("#jqxProgressBar").val();</code></pre> // Set value. <pre><code>$("#jqxProgressBar").jqxProgressBar('val', 50);</code></pre> // Set value using jQuery's val(). <pre><code>$("#jqxProgressBar").val(50);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/WbAGC/">sets a new value in the jqxProgressBar.</a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>