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, Panel, jqxPanel, Scrollable Panel, Overflow Panel" /> <meta name="description" content="This page represents the help documentation of the jqxPanel widget." /> <title>jqxPanel 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='Span5'>autoUpdate</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> Automatically updates the panel, if its children size is changed. </p> <h4>Code examples</h4> <p> Set the <code>autoUpdate</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({autoUpdate: true});</code></pre> <p> Get the <code>autoUpdate</code> property. </p> <pre><code>var autoUpdate = $('#jqxPanel').jqxPanel('autoUpdate'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2kM2t/">autoUpdate is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>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 panel is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({ disabled:true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxPanel').jqxPanel('disabled'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TtCVX/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>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 panel's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({height:"400px"});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxPanel').jqxPanel('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DRpF6/">height is set to 250</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>$('#jqxPanel').jqxPanel({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxPanel').jqxPanel('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c236J/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>sizeMode</span> </td> <td> <span>String</span> </td> <td>'fixed' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the sizing mode. In the 'fixed' mode, the panel displays scrollbars, if its content requires it. In the wrap mode, the scrollbars are not displayed and the panel automatically changes its size. </p> <b>Possible Values:</b> <br /> <pre><code>'fixed'</code></pre> <pre><code>'wrap'</code></pre> <h4>Code examples</h4> <p> Set the <code>sizeMode</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({sizeMode: "wrap"});</code></pre> <p> Get the <code>sizeMode</code> property. </p> <pre><code>var sizeMode = $('#jqxPanel').jqxPanel('sizeMode'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nhbH6/">sizeMode is set to 'wrap'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>scrollBarSize</span> </td> <td> <span>Number</span> </td> <td>17 </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 size. </p> <h4>Code examples</h4> <p> Set the <code>scrollBarSize</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({ scrollBarSize: 20 }); </code></pre> <p> Get the <code>scrollBarSize</code> property. </p> <pre><code>var scrollBarSize = $('#jqxPanel').jqxPanel('scrollBarSize'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gK7Cy/">scrollBarSize is set to 20</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/SjGV5/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>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 panel's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxPanel').jqxPanel({width:"200px"});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxPanel').jqxPanel('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XmKFp/">width is set to 250</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='Span6'>append</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> Appends an element to the panel's content. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>html element</em></td> <td>Object</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>append</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('append', $('#elementId')[0]);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/acwZB/">appends an element in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>clearcontent</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> Clears the panel's content. </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>clearcontent</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('clearcontent');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mzbtD/">clears the content of the jqxPanel.</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>$('#jqxPanel').jqxPanel('destroy'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/H5hgB/">destroy the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>focus</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> Focuses 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>focus</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('focus'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Mhkjh/">focuses the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>getScrollHeight</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> Get the scrollable height. Returns a Number. </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>Number</em> </div> <h4>Code examples</h4> <p> Invoke the <code>getScrollHeight</code> method. </p> <pre><code>var height = $('#jqxPanel').jqxPanel('getScrollHeight');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ArF4E/">gets the scroll's height in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>getVScrollPosition</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> Get the vertical scrollbar's position. Returns a Number. </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>Number</em> </div> <h4>Code examples</h4> <p> Invoke the <code>getVScrollPosition</code> method. </p> <pre><code>var position = $('#jqxPanel').jqxPanel('getVScrollPosition');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HUWbk/">gets the scroll's position in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>getScrollWidth</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> Get the scrollable width. Returns a Number. </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>Number</em> </div> <h4>Code examples</h4> <p> Invoke the <code>getScrollWidth</code> method. </p> <pre><code>var width = $('#jqxPanel').jqxPanel('getScrollWidth');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X5mjW/">gets the scroll's width in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>getHScrollPosition</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> Get the horizontal scrollbar's position. Returns a Number. </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>Number</em> </div> <h4>Code examples</h4> <p> Invoke the <code>getHScrollPosition</code> method. </p> <pre><code>var position = $('#jqxPanel').jqxPanel('getHScrollPosition');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RU7An/">gets the scroll's possition in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>prepend</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> Prepends an element to the panel's content. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>html element</em></td> <td>Object</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>prepend</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('prepend', $('#elementId')[0]);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wuabs/">prepends an element in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>remove</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> Remove an element from the panel's content. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>html element</em></td> <td>Object</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>remove</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('remove', $('#elementId')[0]);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xMJrh/">removes an element in the jqxPanel.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>scrollTo</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> Scroll to specific position. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>top</em></td> <td>Number</td> <td></td> </tr> <tr> <td><em>left</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>scrollTo</code> method. </p> <pre><code>$('#jqxPanel').jqxPanel('scrollTo', 10, 20);</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aP5Vu/">scrolls to a specific position in the jqxPanel.</a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>