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, Tabs, Tab Control, Tab Strip, Tab View, jqxTabs, jQuery Tabs, jquery mobile tabs, jquery mobile tabcontrol, jqwidgets tabcontrol" /> <meta name="description" content="This page represents the help documentation of the jqxTabs widget." /> <title>jqxTabs 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='Span6'>animationType</span> </td> <td> <span>String</span> </td> <td>none </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the animation type of switching tabs. </p> <b>Possible Values:</b> <br /> <pre><code>'none'</code></pre> <pre><code>'fade'</code></pre> <h4>Code examples</h4> <p> Set the <code>animationType</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ animationType: 'fade' }); </code></pre> <p> Get the <code>animationType</code> property. </p> <pre><code>var animationType = $('#jqxTabs').jqxTabs('animationType'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TDhDX/">animationType is set to 'fade'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>autoHeight</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 jqxTabs header's height will be equal to the item with max height. </p> <h4>Code examples</h4> <p> Set the <code>autoHeight</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ autoHeight: false}); </code></pre> <p> Get the <code>autoHeight</code> property. </p> <pre><code>var autoHeight = $('#jqxTabs').jqxTabs('autoHeight'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/HpGSK/">autoHeight is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span19'>closeButtonSize</span> </td> <td> <span>Number</span> </td> <td>16 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the close button size. </p> <h4>Code examples</h4> <p> Set the <code>closeButtonSize</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ closeButtonSize:20}); </code></pre> <p> Get the <code>closeButtonSize</code> property. </p> <pre><code>var closeButtonSize = $('#jqxTabs').jqxTabs('closeButtonSize'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GXFRC/">closeButtonSize is set to 20</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>collapsible</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> Enables or disables the collapsible feature. </p> <h4>Code examples</h4> <p> Set the <code>collapsible</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ collapsible: false }); </code></pre> <p> Get the <code>collapsible</code> property. </p> <pre><code>var collapsible = $('#jqxTabs').jqxTabs('collapsible'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ghzBF/">collapsible is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>contentTransitionDuration</span> </td> <td> <span>Number</span> </td> <td>450 </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 of the content's fade animation which occurs when the user selects a tab. This setting has effect when the 'animationType' is set to 'fade'. </p> <h4>Code examples</h4> <p> Set the <code>contentTransitionDuration</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ contentTransitionDuration:500 }); </code></pre> <p> Get the <code>contentTransitionDuration</code> property. </p> <pre><code>var contentTransitionDuration = $('#jqxTabs').jqxTabs('contentTransitionDuration'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SDjGG/">contentTransitionDuration is set to 3000</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> Enables or disables the jqxTabs widget. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property . </p> <pre><code>$('#jqxTabs').jqxTabs({ disabled:true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxTabs').jqxTabs('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sE8QA/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>enabledHover</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> Enables or disables the tabs hover effect. </p> <h4>Code examples</h4> <p> Set the <code>enabledHover</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ enabledHover: false }); </code></pre> <p> Get the <code>enabledHover</code> property. </p> <pre><code>var enabledHover = $('#jqxTabs').jqxTabs('enabledHover'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4yh9h/">enabledHover is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>enableScrollAnimation</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 scroll animation is enabled. </p> <h4>Code examples</h4> <p> Set the <code>enableScrollAnimation</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ enableScrollAnimation:false }); </code></pre> <p> Get the <code>enableScrollAnimation</code> property. </p> <pre><code>var enableScrollAnimation = $('#jqxTabs').jqxTabs('enableScrollAnimation'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GKekC/">enableScrollAnimation is set to false</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>auto </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets widget's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({height:"400px"});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxTabs').jqxTabs('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/w6UT3/">height is set to 150</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span67'>initTabContent</span> </td> <td> <span>function</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Callback function that the tab calls when a content panel needs to be initialized. </p> <h4>Code examples</h4> <p> Set the <code>initTabContent</code> property. </p> <pre><code> $(document).ready(function () { var loadPage = function (url, tabIndex) { $.get(url, function (data) { // dynamically appends data returned from a server to a content element with ID equal to "content1" // for the first tab, "content2" for the second tab or "content3" for the third tab. $('#content' + tabIndex).html(data); }); } // Create jqxTabs. $('#jqxTabs').jqxTabs({ width: 580, height: 200, initTabContent: function (tab) { // The 'tab' parameter represents the selected tab's index. var pageIndex = tab + 1; loadPage('pages/ajax' + pageIndex + '.htm', pageIndex); } }); }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2nbr7/">initTabContent is set to a custom function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>keyboardNavigation</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> Enables or disables the keyboard navigation. </p> <h4>Code examples</h4> <p> Set the <code>keyboardNavigation</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ keyboardNavigation: false}); </code></pre> <p> Get the <code>keyboardNavigation</code> property. </p> <pre><code>var keyboardNavigation = $('#jqxTabs').jqxTabs('keyboardNavigation'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/A9zAC/">keyboardNavigation is set to a false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>position</span> </td> <td> <span>String</span> </td> <td>top </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 tabs are positioned at 'top' or 'bottom. </p> <b>Possible Values:</b> <br /> <pre><code>'top'</code></pre> <pre><code>'bottom'</code></pre> <h4>Code examples</h4> <p> Set the <code>position</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ position:"bottom" }); </code></pre> <p> Get the <code>position</code> property. </p> <pre><code>var position = $('#jqxTabs').jqxTabs('position'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MyUwQ/">position is set to 'bottom'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span22'>reorder</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> Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered. </p> <h4>Code examples</h4> <p> Set the <code>reorder</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({reorder:true}); </code></pre> <p> Get the <code>reorder</code> property. </p> <pre><code>var reorder = $('#jqxTabs').jqxTabs('reorder'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5fSCq/">reorder is set to a true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span49'>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>$('#jqxTabs').jqxTabs({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxTabs').jqxTabs('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6e2rM/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>scrollAnimationDuration</span> </td> <td> <span>Number</span> </td> <td>250 </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 of the scroll animation. </p> <h4>Code examples</h4> <p> Set the <code>scrollAnimationDuration</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ scrollAnimationDuration: 200 }); </code></pre> <p> Get the <code>scrollAnimationDuration</code> property. </p> <pre><code>var scrollAnimationDuration = $('#jqxTabs').jqxTabs('scrollAnimationDuration'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3wM8U/">scrollAnimationDuration is set to 3000</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>selectedItem</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 selected tab. </p> <h4>Code examples</h4> <p> Set the <code>selectedItem</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ selectedItem: 2 }); </code></pre> <p> Get the <code>selectedItem</code> property. </p> <pre><code>var selectedItem = $('#jqxTabs').jqxTabs('selectedItem'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MGvwb/">selectedItem is set to 1</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>selectionTracker</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 selection tracker is enabled. </p> <h4>Code examples</h4> <p> Set the <code>selectionTracker</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ selectionTracker:false}); </code></pre> <p> Get the <code>selectionTracker</code> property. </p> <pre><code>var selectionTracker = $('#jqxTabs').jqxTabs('selectionTracker'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sNEqt/">selectionTracker is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>scrollable</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 scrolling is enabled. </p> <h4>Code examples</h4> <p> Set the <code>scrollable</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ scrollable:false}); </code></pre> <p> Get the <code>scrollable</code> property. </p> <pre><code>var scrollable = $('#jqxTabs').jqxTabs('scrollable'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xpeQu/">scrollable is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span15'>scrollPosition</span> </td> <td> <span>String</span> </td> <td>'right' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the position of the scroll arrows. </p> <b>Possible Values:</b> <br /> <pre><code>'left'</code></pre> <pre><code>'right'</code></pre> <pre><code>'both'</code></pre> <h4>Code examples</h4> <p> Set the <code>scrollPosition</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ scrollPosition:'right'}); </code></pre> <p> Get the <code>scrollPosition</code> property. </p> <pre><code>var scrollPosition = $('#jqxTabs').jqxTabs('scrollPosition'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t9qbm/">scrollPosition is set to 'both'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span16'>scrollStep</span> </td> <td> <span>Number</span> </td> <td>70 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the scrolling step. </p> <h4>Code examples</h4> <p> Set the <code>scrollStep</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ scrollStep:80}); </code></pre> <p> Get the <code>scrollStep</code> property. </p> <pre><code>var scrollStep = $('#jqxTabs').jqxTabs('scrollStep'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/53w7S/">scrollStep is set to 100</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span18'>showCloseButtons</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 a close button is displayed in each tab. </p> <h4>Code examples</h4> <p> Set the <code>showCloseButtons</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ showCloseButtons:false}); </code></pre> <p> Get the <code>showCloseButtons</code> property. </p> <pre><code>var showCloseButtons = $('#jqxTabs').jqxTabs('showCloseButtons'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/K37dF/">showCloseButtons is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>toggleMode</span> </td> <td> <span>String</span> </td> <td>click </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets user interaction used for switching the different tabs. </p> <b>Possible Values:</b> <br /> <pre><code>'click'</code></pre> <pre><code>'dblclick'</code></pre> <pre><code>'mouseenter'</code></pre> <pre><code>'none'</code></pre> <h4>Code examples</h4> <p> Set the <code>toggleMode</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({ toggleMode:'mouseenter' }); </code></pre> <p> Get the <code>toggleMode</code> property. </p> <pre><code>var toggleMode = $('#jqxTabs').jqxTabs('toggleMode'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UySsx/">toggleMode is set to 'dlclick'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span68'>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/f4GFH/">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>auto </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets widget's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxTabs').jqxTabs({width:"200px"});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxTabs').jqxTabs('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kYyW5/">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='Span25'>add</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 a new tab is added to the jqxTabs. </p> <h4>Code examples</h4> <p> Bind to the <code>add</code> event by type: jqxTabs. </p> <pre><code>$('#jqxTabs').on('add', function (event) { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/73h7n/">Bind to the add event by type: jqxTabs.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>created</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 jqxTabs is created. You should subscribe to this event before the jqxTabs initialization. </p> <h4>Code examples</h4> <p> Bind to the <code>created</code> event by type: jqxTabs. </p> <pre><code>$('#jqxTabs').on('created', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4LHn6/">Bind to the created event by type: jqxTabs.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span59'>collapsed</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> Theis event is triggered when any tab is collapsed. </p> <h4>Code examples</h4> <p> Bind to the <code>collapsed</code> event by type: jqxTabs </p> <pre><code>$('#jqxTabs').on('collapsed', function (event) { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NNQnb/">Bind to the collapsed event by type: jqxTabs.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span33'>dragStart</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 drag operation started. </p> <h4>Code examples</h4> <p> Bind to the <code>dragStart</code> event by type: jqxTabs </p> <pre><code>$('#jqxTabs').on('dragStart', function () { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RsYLR/">Bind to the dragStart event by type: jqxTabs.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span34'>dragEnd</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 drag operation ended. </p> <h4>Code examples</h4> <p> Bind to the <code>dragEnd</code> event by type: jqxTabs </p> <pre><code>$('#jqxTabs').on('dragEnd', function (event) { // Some code here. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JaueQ/">Bind to the dragEnd event by type: jqxTabs.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span60'>expanded</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>