jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,696 lines • 89.8 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, Navigation Bar, Accordion, Panel Bar, Navigation Widget, Panel, Accordion Bar" />
<meta name="description" content="This page represents the help documentation of the jqxNavigationBar widget." />
<title>jqxNavigationBar 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='Span4'>animationType</span>
</td>
<td>
<span>String</span>
</td>
<td>'slide'
</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.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'slide'</code></pre>
<pre><code>'fade'</code></pre>
<pre><code>'none'</code></pre>
<h4>Code example</h4>
<p>
Set the <code>animationType</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({animationType: "none" }); </code></pre>
<p>
Get the <code>animationType</code> property.
</p>
<pre><code>var animationType = $('#jqxNavigationBar').jqxNavigationBar('animationType');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wMR4f/">animationType is set to 'fade'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>arrowPosition</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 header's arrow position.
</p>
<b>Possible Values:</b>
<br />
<pre><code>'left'</code></pre>
<pre><code>'right'</code></pre>
<h4>Code example</h4>
<p>
Set the <code>arrowPosition</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ arrowPosition: "right" }); </code></pre>
<p>
Get the <code>arrowPosition</code> property.
</p>
<pre><code>var arrowPosition = $('#jqxNavigationBar').jqxNavigationBar('arrowPosition');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xGUAm/">arrowPosition is set to 'left'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>collapseAnimationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the collapsing animation duration.
</p>
<h4>Code example</h4>
<p>
Set the <code>collapseAnimationDuration</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ collapseAnimationDuration: 400});</code></pre>
<p>
Get the <code>collapseAnimationDuration</code> property.
</p>
<pre><code>var collapseAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('collapseAnimationDuration');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aX7RB/">collapseAnimationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>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 navigation bar is disabled.
</p>
<h4>Code example</h4>
<p>
Set the <code>disabled</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ disabled:true }); </code></pre>
<p>
Get the <code>disabled</code> property.
</p>
<pre><code>var disabled = $('#jqxNavigationBar').jqxNavigationBar('disabled');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m8A3p/">disabled is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='property-name-disabled'>expandAnimationDuration</span>
</td>
<td>
<span>Number</span>
</td>
<td>400
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the expanding animation duration.
</p>
<h4>Code example</h4>
<p>
Set the <code>expandAnimationDuration</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 400 });
</code></pre>
<p>
Get the <code>expandAnimationDuration</code> property.
</p>
<pre><code>var expandAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('expandAnimationDuration');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/KjWzz/">expandAnimationDuration is set to 3000</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>expandMode</span>
</td>
<td>
<span>String</span>
</td>
<td>'singleFitHeight'
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets navigation bar's expand mode. Possible values ['single', 'singleFitHeight'
'multiple', 'toggle', 'none'].
</p>
<b>Possible Values:</b>
<br />
<pre><code>'single' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown.</code></pre>
<pre><code>'singleFitHeight' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown inside the content of the expanded item</code></pre>
<pre><code>'multiple' - multiple items can be expanded. If the expanded items' height is greater than the value of the height property, a vertical scrollbar is shown.</code></pre>
<pre><code>'toggle' - only one item can be expanded. The expanded item can also be collapsed.If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown</code></pre>
<pre><code>'none' - no items can be expanded/collapsed</code></pre>
<h4>Code example</h4>
<p>
Set the <code>expandMode</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandMode: "none" }); </code></pre>
<p>
Get the <code>expandMode</code> property.
</p>
<pre><code>var expandMode = $('#jqxNavigationBar').jqxNavigationBar('expandMode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BZ6uU/">expandMode is set to 'single'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>expandedIndexes</span>
</td>
<td>
<span>Array</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 expanded item(s). If the property <code>expandMode</code> is set
to either 'single', 'singleFitHeight', 'toggle' or 'none', only the item corresponding
to the first value in the array is expanded. If the property <code>expandMode</code>
is set to either 'single' or 'singleFitHeight' and the expandedIndexes array is
empty, the first item is expanded automatically.
</p>
<h4>Code example</h4>
<p>
Set the <code>expandedIndexes</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: [0, 1] }); </code></pre>
<p>
Get the <code>expandedIndexes</code> property.
</p>
<pre><code>var expandedIndexes = $('#jqxNavigationBar').jqxNavigationBar('expandedIndexes');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/NHHXc/">expandedIndexes is set to [0, 1]</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>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 the navigationbar's height. Possible values - 'auto' or string like
this 'Npx' where N is any Number or a numeric value in pixels.
</p>
<h4>Code example</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ height: 200 }); </code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxNavigationBar').jqxNavigationBar('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p9BPs/">height is set to 200</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>initContent</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 called when an item's content needs to be initialized. Useful
for initializing other widgets within the content of any of the items of jqxNavigationBar.
The index argument shows which item is initialized.
</p>
<h4>Code example</h4>
<p>
Set the <code>initContent</code> property.
</p>
<pre><code>$("#jqxNavigationBar").jqxNavigationBar({initContent: function (index)
{
$("#jqxButton").jqxButton({ width: 100, height: 50 });
}
});
</code></pre>
<p>
Get the <code>initContent</code> property.
</p>
<pre><code>var initContent = $('#jqxNavigationBar').jqxNavigationBar('initContent');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/TMTgd/">initContent is set to a custom function</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span30'>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>
Determines whether the right-to-left support is enabled.
</p>
<h4>Code example</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$("#jqxNavigationBar").jqxNavigationBar({ rtl: true }); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxNavigationBar').jqxNavigationBar('rtl');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fsy3k/">rtl is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>showArrow</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 header's arrow is going to be shown.
</p>
<h4>Code example</h4>
<p>
Set the <code>showArrow</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ showArrow: false }); </code></pre>
<p>
Get the <code>showArrow</code> property.
</p>
<pre><code>var showArrow = $('#jqxNavigationBar').jqxNavigationBar('showArrow');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4jLxU/">showArrow is set to false</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/4MJm3/">theme is set to 'energyblue'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>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 expanding or collapsing the content. Possible
values ['click', 'dblclick', 'none'].
</p>
<b>Possible Values:</b>
<br />
<pre><code>'click'</code></pre>
<pre><code>'dblclick'</code></pre>
<pre><code>'none'</code></pre>
<h4>Code example</h4>
<p>
Set the <code>toggleMode</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ toggleMode: "none" }); </code></pre>
<p>
Get the <code>toggleMode</code> property.
</p>
<pre><code>var toggleMode = $('#jqxNavigationBar').jqxNavigationBar('toggleMode');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CMbmz/">toggleMode is set to 'dblclick'</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>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 the navigationbar's width. Possible values - 'auto' or string like
this 'Npx' where N is any Number or a numeric value in pixels.
</p>
<h4>Code example</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar({ width: 'auto' }); </code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxNavigationBar').jqxNavigationBar('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Er4FS/">width is set to 400</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='Span13'>collapsingItem</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 jqxNavigationBar item is going to be collapsed.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>collapsingItem</code> event by type: jqxNavigationBar.
</p>
<pre><code>$('#jqxNavigationBar').on('collapsingItem', function (event)
{
var collapsingItem = event.args.item; alert("Expanding item number: " + collapsingItem);
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DGCre/">Bind to the collapsingItem event by type: jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span19'>collapsedItem</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 jqxNavigationBar item is collapsed.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>collapsedItem</code> event by type: jqxNavigationBar.
</p>
<pre><code>$('#jqxNavigationBar').on('collapsedItem', function (event)
{
var collapsedItem0= event.args.item; alert("Expanding item number: " + collapsedItem);
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/C45sR/">Bind to the collapsedItem event by type: jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>expandingItem</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 jqxNavigationBar item is going to be expanded.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>expandingItem</code> event by type: jqxNavigationBar.
</p>
<pre><code>$('#jqxNavigationBar').on('expandingItem', function (event)
{
var expandingItem = event.args.item; alert("Expanding item number: " + expandingItem);
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XtGuB/">Bind to the expandingItem event by type: jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>expandedItem</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 jqxNavigationBar item is expanded.
</p>
<h4>Code example</h4>
<p>
Bind to the <code>expandedItem</code> event by type: jqxNavigationBar.
</p>
<pre><code>$('#jqxNavigationBar').on('expandedItem', function (event)
{
var expandedItem = event.args.item; alert("Expanded item number: " + expandedItem);
});
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vUM9G/">Bind to the expandedItem event by type: jqxNavigationBar.</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='Span33'>add</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 inserts an item at the bottom of the navigationbar. It has two parameters
- header (the header of the new item) and content (the content of the new item).
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>add</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('add', 'Header', 'Content');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/W6bhm/">adds an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span37'>collapseAt</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 item with any 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 example</h4>
<p>
Invoke the <code>collapseAt</code>method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('collapseAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9BLbS/">collapses an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span20'>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 item with any 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 example</h4>
<p>
Invoke the <code>disableAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('disableAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/K975m/">disables an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>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>
This method is disabling the navigation bar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>disable</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('disable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/avmWd/">disables the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span32'>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>
This method destroys the navigationbar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/wusBK/">destroy the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>expandAt</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 item with any 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 example</h4>
<p>
Invoke the <code>expandAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('expandAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nUTwg/">expands an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span21'>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 item with any 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 example</h4>
<p>
Invoke the <code>enableAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('enableAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zw4vy/">enables an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span29'>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>
This method is enabling the navigation bar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>enable</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('enable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/64yhW/">enables the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span36'>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>
This method focuses on the navigationbar. When the widget is focused, keyboard navigation
can be used. Here is a list of the keys, supported by jqxNavigationBar and their
function:
</p>
<ul>
<li>
<b>Enter</b>/<b>Spacebar</b> - if the focus is on an item header, collapses or expands
the item.
</li>
<li>
<b>Left</b>/<b>Up arrow</b> - focuses on the previous item header or on the last
one if the currently focused is the first one.
</li>
<li>
<b>Right</b>/<b>Down arrow</b> - focuses on the next item header or on the first
one if the currently focused is the last one.
</li>
<li><b>End</b> - focuses on the last item header.</li>
<li><b>Home</b> - focuses on the first item header.</li>
<li><b>Tab</b> - focuses on the first header or the next element in the DOM.</li>
<li>
<b>Ctrl</b>+<b>Up arrow</b> - if the focus is on an item content, focuses on its
respective header.
</li>
<li>
<b>Ctrl</b>+<b>Down arrow</b> - if the focus is on an item header, focuses on its
respective content.
</li>
</ul>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>focus</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('focus'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aksuL/">focuses the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>getHeaderContentAt</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>
Getting header content of item with any index. Returns a string value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getHeaderContentAt</code> method.
</p>
<pre><code>var header = $('#jqxNavigationBar').jqxNavigationBar('getHeaderContentAt',3);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Qvn5g/">gets the header's content in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span18'>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>
Getting content of item with any index. Returns a string value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>getContentAt</code> method.
</p>
<pre><code>var content = $('#jqxNavigationBar').jqxNavigationBar('getContentAt', 3);
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rFfVq/">gets the content in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span26'>hideArrowAt</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 the arrow of an item with specific 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 example</h4>
<p>
Invoke the <code>hideArrowAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('hideArrowAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/CcBdd/">hides an arrow of an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span23'>invalidate</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 refreshes the navigationbar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>invalidate</code> method.
</p>
<pre><code>('#jqxNavigationBar').jqxNavigationBar('invalidate'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/MBBsk/">invalidates the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span22'>insert</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 inserts an item at a specific index. It has three parameters - index,
header (the header of the new item) and content (the content of the new item).
</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>item</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>insert</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('insert', 1, 'Header', 'Content'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/sJEPq/">inserts an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span24'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This method refreshes the navigationbar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('refresh'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tG93Y/">refreshes the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span31'>render</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 renders the navigationbar.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('render'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QFjgM/">renders the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span35'>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>
This method removes an item at a specific index. The parameter (index) is optional
and if it is not set, the method removes the last item.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>index</em></td>
<td>Number</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>remove</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('remove', 0); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xKtN9/">removes an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>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>
Setting content to item with any 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>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>setContentAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('setContentAt', 3, 'Content'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/RTWk4/">sets a content in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>setHeaderContentAt</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>
Setting header content to item with any 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>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>setHeaderContentAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('setHeaderContentAt', 3, 'Header');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7prP7/">sets new header's content in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span25'>showArrowAt</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 the arrow of an item with specific 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 example</h4>
<p>
Invoke the <code>showArrowAt</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('showArrowAt', 3); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SkZVy/">shows the arrow of an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span34'>update</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 updates an item at a specific index. It has three parameters - index,
header (the new header of the item) and content (the new content of the item).
</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>item</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>item</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code example</h4>
<p>
Invoke the <code>update</code> method.
</p>
<pre><code>$('#jqxNavigationBar').jqxNavigationBar('update', 0, 'New header', 'New content');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LBS9n/">updates an item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span38'>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 expanded item.
</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 expanded item.
<pre><code>var value = $("#jqxNavigationBar").jqxNavigationBar('val');</code></pre>
// Get the expanded item's index using jQuery's val()
<pre><code>var value = $("#jqxNavigationBar").val();</code></pre>
// Set the expanded item.
<pre><code>$("#jqxNavigationBar").jqxNavigationBar('val', 2);</code></pre>
// Set the expanded item using jQuery's val().
<pre><code>$("#jqxNavigationBar").val(2);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/UVBLt/">set the expanded item in the jqxNavigationBar.</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>