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>jqxScrollView 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='Span3'>animationDuration</span> </td> <td> <span>Number</span> </td> <td>30 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the animationDuration property. Specifies the duration of the animation which starts when the current page is changed. </p> <h4>Code example</h4> <p> Set the <code>animationDuration</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ animationDuration: 500}); </code></pre> <p> Get the <code>animationDuration</code> property. </p> <pre><code>var animationDuration = $('#jqxScrollView').jqxScrollView('animationDuration');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Fen5S/">animationDuration is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>bounceEnabled</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 bounce effect is enabled when pages are changed. </p> <h4>Code example</h4> <p> Set the <code>bounceEnabled</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({bounceEnabled: false});</code></pre> <p> Get the <code>bounceEnabled</code> property. </p> <pre><code>var bounceEnabled = $('#jqxScrollView').jqxScrollView('bounceEnabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pXeyu/">bounceEnabled is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>buttonsOffset</span> </td> <td> <span>Array</span> </td> <td>[0, 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 jqxScrollView's buttonsOffset property. This property sets the offset from the default location of the navigation buttons. </p> <h4>Code example</h4> <p> Set the <code>buttonsOffset</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ buttonsOffset: [30, 30] }); </code></pre> <p> Get the <code>buttonsOffset</code> property. </p> <pre><code>var buttonsOffset = $('#jqxScrollView').jqxScrollView('buttonsOffset');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EPfqW/">buttonsOffset is set to [0,0]</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>currentPage</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 jqxScrollView's currentPage property. The currentPage specifies the displayed element. </p> <h4>Code example</h4> <p> Set the <code>currentPage</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ currentPage: 1 }); </code></pre> <p> Get the <code>currentPage</code> property. </p> <pre><code>var currentPage = $('#jqxScrollView').jqxScrollView('currentPage');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Q8tT4/">currentPage is set to 1</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>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 the jqxScrollView's disabled property. </p> <h4>Code example</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ disabled: true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxScrollView').jqxScrollView('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yj3Hv/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>height</span> </td> <td> <span>String</span> </td> <td>320 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxScrollView's height. </p> <h4>Code example</h4> <p> Set the <code>height</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ height: '250px' }); </code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxScrollView').jqxScrollView('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rMXEH/">height is set to 250</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>moveThreshold</span> </td> <td> <span>Number</span> </td> <td>0.5 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxScrollView's moveThreshold property. The moveThreshold property specifies how much the user should drag the current element to navigate to next/previous element. Values should be set from 0.1 to 1. 0.5 means 50% of the element's width. </p> <h4>Code example</h4> <p> Set the <code>moveThreshold</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ moveThreshold: 0.6 }); </code></pre> <p> Get the <code>moveThreshold</code> property. </p> <pre><code>var moveThreshold = $('#jqxScrollView').jqxScrollView('moveThreshold');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XETVB/">moveThreshold is set to 1</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>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 navigation buttons are visible. </p> <h4>Code example</h4> <p> Set the <code>showButtons</code> property specified. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ showButtons: false }); </code></pre> <p> Get the <code>showButtons</code> property. </p> <pre><code>var showButtons = $('#jqxScrollView').jqxScrollView('showButtons');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3ZmFE/">showButtons is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span35'>slideShow</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> Indicates whether the slideShow mode is enabled. In this mode, pages are changed automatically in a time interval. </p> <h4>Code example</h4> <p> Set the <code>slideShow</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({slideShow: true});</code></pre> <p> Get the <code>slideShow</code> property. </p> <pre><code>var slideShow = $('#jqxScrollView').jqxScrollView('slideShow');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Ga4nK/">slideShow is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span36'>slideDuration</span> </td> <td> <span>Number</span> </td> <td>3000 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the duration in milliseconds of a time interval. The current page is changed when the time interval is elapsed. </p> <h4>Code example</h4> <p> Set the <code>slideDuration</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({slideDuration: 4000});</code></pre> <p> Get the <code>slideDuration</code> property. </p> <pre><code>var slideDuration = $('#jqxScrollView').jqxScrollView('slideDuration');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tCedC/">slideDuration is set to 300</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/HPKTB/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>width</span> </td> <td> <span>String</span> </td> <td>320 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxScrollView's width. </p> <h4>Code example</h4> <p> Set the <code>width</code> property. </p> <pre><code>$("#jqxScrollView").jqxScrollView({ width: '250px' }); </code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxScrollView').jqxScrollView('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LjgXD/">width is set to 300</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'>pageChanged</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 current page is changed. </p> <h4>Code examples</h4> <p> Bind to the <code>pageChanged</code> event by type: jqxScrollView. </p> <pre><code>$('#jqxScrollView').bind('pageChanged', function (event) { var page = event.args.currentPage; }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eY8Qc/">Bind to the pageChanged event by type: jqxScrollView.</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='Span11'>back</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> Navigates to the previous page. </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 example</h4> <p> Invoke the <code>back</code> method. </p> <pre><code>$("#jqxScrollView").jqxScrollView('back'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/z6ZFQ/">invoke the back method of the jqxScrollView.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span37'>changePage</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> Navigates to a page. </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 example</h4> <p> Invoke the <code>changePage</code> method. </p> <pre><code>$("#jqxScrollView").jqxScrollView('changePage', 0); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EFGrv/">change the page in the jqxScrollView.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>forward</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> Navigates to the next page. </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 example</h4> <p> Invoke the <code>forward</code> method. </p> <pre><code>$("#jqxScrollView").jqxScrollView('forward'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5B8za/">invoke the forward method of the jqxScrollView.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span31'>refresh</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> Refreshes 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 example</h4> <p> Invoke the <code>refresh</code> method. </p> <pre><code>$("#jqxScrollView").jqxScrollView('refresh'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/cbkSn/">refresh the jqxScrollView.</a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>