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> <title>jqxScrollBar API Reference</title> <meta name="keywords" content="jQuery, ScrollBar, Scroll Widget." /> <meta name="description" content="This page represents the help documentation of the jqxRating widget." /> <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='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> Sets or gets whether the scrollbar is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ disabled:true });</code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxScrollBar').jqxScrollBar('disabled'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6H8zE/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>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 height of the scroll bar. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ height: '25px', }); </code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxScrollBar').jqxScrollBar('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GfAYy/">height is set to 18</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>largestep</span> </td> <td> <span>Number</span> </td> <td>50 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the scrollbar's largestep. The value is increased/decreased with this largestep when the user presses the left mouse button in the area between a scrollbar button and thumb. </p> <h4>Code examples</h4> <p> Set the <code>largestep</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ largestep:35 }); </code></pre> <p> Get the <code>largestep</code> property. </p> <pre><code>var largestep = $('#jqxScrollBar').jqxScrollBar('largestep'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RKxLt/">largestep is set to 100</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>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 scrollbar's minimum value. </p> <h4>Code examples</h4> <p> Set the <code>min</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ min:7 }); </code></pre> <p> Get the <code>min</code> property. </p> <pre><code>var min = $('#jqxScrollBar').jqxScrollBar('min'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B3Whb/">min is set to 3</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>max</span> </td> <td> <span>Number</span> </td> <td>1000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the scrollbar's maximum value. </p> <h4>Code examples</h4> <p> Set the <code>max</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ max:700 }); </code></pre> <p> Get the <code>max</code> property. </p> <pre><code>var max = $('#jqxScrollBar').jqxScrollBar('max'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rNQWh/">max is set to 120</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>$('#jqxScrollBar').jqxScrollBar({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxScrollBar').jqxScrollBar('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2Dea3/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>step</span> </td> <td> <span>Number</span> </td> <td>10 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the scrollbar's step. The value is increased/decreased with this step when the user presses a scrollbar button. </p> <h4>Code examples</h4> <p> Set the <code>step</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ step:7 }); </code></pre> <p> Get the <code>step</code> property. </p> <pre><code>var step = $('#jqxScrollBar').jqxScrollBar('step'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f9zqZ/">step is set to 20</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>showButtons</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the scrollbar displays the increase and decrease arrow buttons. </p> <h4>Code examples</h4> <p> Set the <code>showButtons</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ showButtons: true });</code></pre> <p> Get the <code>showButtons</code> property. </p> <pre><code>var showButtons = $('#jqxScrollBar').jqxScrollBar('showButtons'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HN39x/">showButtons is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>thumbMinSize</span> </td> <td> <span>Number</span> </td> <td>10 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Specifies the scrollbar thumb's minimum size. </p> <h4>Code examples</h4> <p> Set the <code>thumbMinSize</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ thumbMinSize:5 });</code></pre> <p> Get the <code>thumbMinSize</code> property. </p> <pre><code>var thumbMinSize = $('#jqxScrollBar').jqxScrollBar('thumbMinSize'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cxrUd/">thumbMinSize is set to 5</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/SLgrK/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>vertical</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 scrollbar's orientation. </p> <h4>Code examples</h4> <p> Set the <code>vertical</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ vertical: true }); </code></pre> <p> Get the <code>vertical</code> property. </p> <pre><code>var vertical = $('#jqxScrollBar').jqxScrollBar('vertical'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8PtUX/">vertical is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>value</span> </td> <td> <span>Number</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 scrollbar's value. </p> <h4>Code examples</h4> <p> Set the <code>value</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ value:700 }); </code></pre> <p> Get the <code>value</code> property. </p> <pre><code>var value = $('#jqxScrollBar').jqxScrollBar('value'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GnhzF/">value is set to 20</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>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 width of the scroll bar. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxScrollBar').jqxScrollBar({ width: '250px' }); </code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxScrollBar').jqxScrollBar('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DrxkK/">width is set to 250</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='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: jqxScrollBar. </p> <pre><code>$('#jqxScrollBar').on('valueChanged', function (event) { var currentValue = event.currentValue; var previousValue = event.previousValue; });</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BZHvF/">Bind to the valueChanged event by type: jqxScrollBar.</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='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>$('#jqxScrollBar').jqxScrollBar('destroy'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wN5jx/">destroy the jqxScrollBar</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>isScrolling</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> Returns true, if the user is scrolling. Otherwise, returns false. </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>Boolean</em> </div> <h4>Code examples</h4> <p> Invoke the <code>isScrolling</code> method. </p> <pre><code>var scrolling = $('#jqxScrollBar').jqxScrollBar('isScrolling'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/k3byD/">invoke the isScrolling method of the jqxScrollBar</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span37'>setPosition</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 thumb's position </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>index</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>setPosition</code> method. </p> <pre><code>//@param Number</code></pre> <pre><code>$('#jqxScrollBar').jqxScrollBar('setPosition', 50); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/amseY/">sets the possition of the jqxScrollBar</a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>