jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
2,345 lines • 121 kB
HTML
<!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>
This event is triggered when any tab is expanded.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>expanded</code> event by type: jqxTabs
</p>
<pre><code>$('#jqxTabs').on('expanded', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ckFwU/">Bind to the expanded event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>removed</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 tab is removed.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>removed</code> event by type: jqxTabs.
</p>
<pre><code>$('#jqxTabs').on('removed', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gRaUz/">Bind to the removed event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>selecting</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 selects a tab. This event is cancelable. You can
cancel the selection by setting the 'event.cancel = true' in the event callback.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>selecting</code> event by type: jqxTabs
</p>
<pre><code>$('#jqxTabs').on('selecting', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9aE5Y/">Bind to the selecting event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>selected</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 selects a new tab.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>selected</code> event by type: jqxTabs.
</p>
<pre><code>$('#jqxTabs').on('selected', function (event)
{
var selectedTab = event.args.item;
}); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RaXVR/">Bind to the selected event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>tabclick</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 click a tab. You can retrieve the clicked tab's index.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>tabclick</code> event by type: jqxTabs.
</p>
<pre><code> $('#jqxTabs').on('tabclick', function (event)
{
var clickedItem = event.args.item;
}); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/g3KsF/">Bind to the tabclick event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>unselecting</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 selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can
cancel the selection by setting the 'event.cancel = true' in the event callback.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>unselecting</code> event by type: jqxTabs
</p>
<pre><code>$('#jqxTabs').on('unselecting', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/PcMKU/">Bind to the unselecting event by type: jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>unselected</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 selects a tab. The last selected tab becomes unselected.
</p>
<h4>Code examples</h4>
<p>
Bind to the <code>unselected</code> event by type: jqxTabs
</p>
<pre><code>$('#jqxTabs').on('unselected', function (event) { // Some code here. }); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5c4Q2/">Bind to the unselected event by type: jqxTabs.</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='Span42'>addAt</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>
Adding tab at indicated 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>
<tr>
<td><em>title</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>content</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>addAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('addAt', 3, tabTitle, tabContent); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pLRuy/">adds a new tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span43'>addFirst</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>
Adding tab at the beginning.
</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>addFirst</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('addFirst', element); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/d8vD5/">adds a new fisrt tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span44'>addLast</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>
Adding tab at the end.
</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>addLast</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('addLast', element); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/eLt97/">adds a new last tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span62'>collapse</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>
Collapsing the current selected tab.
</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>collapse</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('collapse'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yQx6v/">collapses the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>disable</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>
Disabling 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>disable</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('disable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D6J4f/">disables the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span40'>disableAt</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>
Disabling tab with indicated index.
</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>disableAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('disableAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/u9YSr/">disables a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span47'>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>$('#jqxTabs').jqxTabs('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jrFH8/">destroy the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span55'>ensureVisible</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>
This method is ensuring the visibility of item with indicated index. If the item is currently not visible the method is scrolling to it.
</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>ensureVisible</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('ensureVisible', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8mhfx/">Bring a tab into the view.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span41'>enableAt</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>
Enabling tab with indicated index.
</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>enableAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('enableAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VLYkW/">enables a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>expand</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>
Expanding the current selected tab.
</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>expand</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('expand'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UycFM/">expands the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>enable</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>
Enabling 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>enable</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('enable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/f4n4J/">enables the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span48'>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>$('#jqxTabs').jqxTabs('focus'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8PDcy/">focuses the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span65'>getTitleAt</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>
Gets the title of a Tab. The returned value is a "string".
</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>String</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getTitleAt</code> method.
</p>
<pre><code>var text = $('#jqxTabs').jqxTabs('getTitleAt', i); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mCWLG/">gets the title of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span66'>getContentAt</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>
Gets the content of a Tab. The returned value is a HTML Element.
</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>Html element</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>getContentAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('getContentAt', i); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qZxY4/">gets the content of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span52'>hideCloseButtonAt</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>
Hiding a close button at a specific 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>hideCloseButtonAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('hideCloseButtonAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9yd8X/">hides the close button of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span53'>hideAllCloseButtons</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>
Hiding all close buttons.
</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>hideAllCloseButtons</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('hideAllCloseButtons'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8vEGq/">hides the close buttons in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span46'>length</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>
Returning the tabs count.
</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>length</code> method.
</p>
<pre><code>var length = $('#jqxTabs').jqxTabs('length'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Pb3sB/">gets the length of the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>removeAt</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>
Removing tab with indicated index.
</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>removeAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('removeAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3xErb/">removes a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>removeFirst</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>
Removing the first tab.
</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>removeFirst</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('removeFirst'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yFeTd/">removes the firts tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span39'>removeLast</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>
Removing the last tab.
</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>removeLast</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('removeLast'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/B9etM/">removes the last tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span45'>select</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>
Selecting tab with indicated index.
</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>select</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('select', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VWPKL/">selects a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>setContentAt</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 content of a Tab.
</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>
<tr>
<td><em>html element</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>setContentAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('setContentAt', i, html); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/D67hd/">sets new content of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span64'>setTitleAt</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 title of a Tab.
</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>
<tr>
<td><em>html element</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>setTitleAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('setTitleAt', i, text); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/E5UM6/">sets new title of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>showCloseButtonAt</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>
Showing close button at a specific 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>showCloseButtonAt</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('showCloseButtonAt', 1); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mCWLG/">shows the close button of a tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span54'>showAllCloseButtons</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>
Showing all close buttons.
</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>showAllCloseButtons</code> method.
</p>
<pre><code>$('#jqxTabs').jqxTabs('showAllCloseButtons'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pR37p/">shows the close buttons in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span50'>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 selected tab.
</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>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>val</code> method.
</p>
// Get the selected tab's index.
<pre><code>var value = $("#jqxTabs").jqxTabs('val');</code></pre>
// Get the selected tab's index using jQuery's val()
<pre><code>var value = $("#jqxTabs").val();</code></pre>
// Set the selected tab.
<pre><code>$("#jqxTabs").jqxTabs('val', 2);</code></pre>
// Set the selected tab using jQuery's val().
<pre><code>$("#jqxTabs").val(2);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NGRSy/">sets the selected tab in the jqxTabs.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>