jqxNavigationBar API Reference

Name Type Default

animationType String 'slide'

Sets or gets the animation type.

Possible Values:

'slide'

'fade'

'none'

Code example

Set the animationType property.

$('#jqxNavigationBar').jqxNavigationBar({animationType: "none" });

Get the animationType property.

var animationType = $('#jqxNavigationBar').jqxNavigationBar('animationType');

Try it: animationType is set to 'fade'

arrowPosition String 'right'

Sets or gets header's arrow position.

Possible Values:

'left'

'right'

Code example

Set the arrowPosition property.

$('#jqxNavigationBar').jqxNavigationBar({ arrowPosition: "right" });

Get the arrowPosition property.

var arrowPosition = $('#jqxNavigationBar').jqxNavigationBar('arrowPosition');

Try it: arrowPosition is set to 'left'

collapseAnimationDuration Number 400

Sets or gets the collapsing animation duration.

Code example

Set the collapseAnimationDuration property.

$('#jqxNavigationBar').jqxNavigationBar({ collapseAnimationDuration: 400});

Get the collapseAnimationDuration property.

var collapseAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('collapseAnimationDuration');

Try it: collapseAnimationDuration is set to 3000

disabled Boolean false

Sets or gets whether the navigation bar is disabled.

Code example

Set the disabled property.

$('#jqxNavigationBar').jqxNavigationBar({ disabled:true });

Get the disabled property.

var disabled = $('#jqxNavigationBar').jqxNavigationBar('disabled');

Try it: disabled is set to true

expandAnimationDuration Number 400

Sets or gets the expanding animation duration.

Code example

Set the expandAnimationDuration property.

$('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 400 });

Get the expandAnimationDuration property.

var expandAnimationDuration = $('#jqxNavigationBar').jqxNavigationBar('expandAnimationDuration');

Try it: expandAnimationDuration is set to 3000

expandMode String 'singleFitHeight'

Sets or gets navigation bar's expand mode. Possible values ['single', 'singleFitHeight' 'multiple', 'toggle', 'none'].

Possible Values:

'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.

'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

'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.

'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

'none' - no items can be expanded/collapsed

Code example

Set the expandMode property.

$('#jqxNavigationBar').jqxNavigationBar({ expandMode: "none" });

Get the expandMode property.

var expandMode = $('#jqxNavigationBar').jqxNavigationBar('expandMode');

Try it: expandMode is set to 'single'

expandedIndexes Array []

Sets or gets the expanded item(s). If the property expandMode 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 expandMode is set to either 'single' or 'singleFitHeight' and the expandedIndexes array is empty, the first item is expanded automatically.

Code example

Set the expandedIndexes property.

$('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: [0, 1] });

Get the expandedIndexes property.

var expandedIndexes = $('#jqxNavigationBar').jqxNavigationBar('expandedIndexes');

Try it: expandedIndexes is set to [0, 1]

height Number/String 'auto'

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.

Code example

Set the height property.

$('#jqxNavigationBar').jqxNavigationBar({ height: 200 });

Get the height property.

var height = $('#jqxNavigationBar').jqxNavigationBar('height');

Try it: height is set to 200

initContent function null

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.

Code example

Set the initContent property.

$("#jqxNavigationBar").jqxNavigationBar({initContent: function (index)
{
    $("#jqxButton").jqxButton({ width: 100, height: 50 });
}
});

Get the initContent property.

var initContent = $('#jqxNavigationBar').jqxNavigationBar('initContent');

Try it: initContent is set to a custom function

rtl Boolean false

Determines whether the right-to-left support is enabled.

Code example

Set the rtl property.

$("#jqxNavigationBar").jqxNavigationBar({ rtl: true });

Get the rtl property.

var rtl = $('#jqxNavigationBar').jqxNavigationBar('rtl');

Try it: rtl is set to true

showArrow Boolean true

Sets or gets whether header's arrow is going to be shown.

Code example

Set the showArrow property.

$('#jqxNavigationBar').jqxNavigationBar({ showArrow: false });

Get the showArrow property.

var showArrow = $('#jqxNavigationBar').jqxNavigationBar('showArrow');

Try it: showArrow is set to false

theme String ''

toggleMode String click

Sets or gets user interaction used for expanding or collapsing the content. Possible values ['click', 'dblclick', 'none'].

Possible Values:

'click'

'dblclick'

'none'

Code example

Set the toggleMode property.

$('#jqxNavigationBar').jqxNavigationBar({ toggleMode: "none" });

Get the toggleMode property.

var toggleMode = $('#jqxNavigationBar').jqxNavigationBar('toggleMode');

Try it: toggleMode is set to 'dblclick'

width Number/String 'auto'

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.

Code example

Set the width property.

$('#jqxNavigationBar').jqxNavigationBar({ width: 'auto' });

Get the width property.

var width = $('#jqxNavigationBar').jqxNavigationBar('width');

Try it: width is set to 400

collapsingItem Event

This event is triggered when a jqxNavigationBar item is going to be collapsed.

Code example

Bind to the collapsingItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').on('collapsingItem', function (event) 
{
    var collapsingItem = event.args.item; alert("Expanding item number: " + collapsingItem); 
});

Try it: Bind to the collapsingItem event by type: jqxNavigationBar.

collapsedItem Event

This event is triggered when a jqxNavigationBar item is collapsed.

Code example

Bind to the collapsedItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').on('collapsedItem', function (event) 
{ 
    var collapsedItem0= event.args.item; alert("Expanding item number: " + collapsedItem);
});

Try it: Bind to the collapsedItem event by type: jqxNavigationBar.

expandingItem Event

This event is triggered when a jqxNavigationBar item is going to be expanded.

Code example

Bind to the expandingItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').on('expandingItem', function (event) 
{ 
    var expandingItem = event.args.item; alert("Expanding item number: " + expandingItem); 
});

Try it: Bind to the expandingItem event by type: jqxNavigationBar.

expandedItem Event

This event is triggered when a jqxNavigationBar item is expanded.

Code example

Bind to the expandedItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').on('expandedItem', function (event) 
{
    var expandedItem = event.args.item; alert("Expanded item number: " + expandedItem);
});

Try it: Bind to the expandedItem event by type: jqxNavigationBar.

add Method

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).

Parameter	Type	Description
item	String
item	String

Return Value
None

Code example

Invoke the add method.

$('#jqxNavigationBar').jqxNavigationBar('add', 'Header', 'Content');

Try it: adds an item in the jqxNavigationBar.

collapseAt Method

Collapsing item with any index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the collapseAtmethod.

$('#jqxNavigationBar').jqxNavigationBar('collapseAt', 3);

Try it: collapses an item in the jqxNavigationBar.

disableAt Method

Disabling item with any index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the disableAt method.

$('#jqxNavigationBar').jqxNavigationBar('disableAt', 3);

Try it: disables an item in the jqxNavigationBar.

disable Method

This method is disabling the navigation bar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the disable method.

$('#jqxNavigationBar').jqxNavigationBar('disable');

Try it: disables the jqxNavigationBar.

destroy Method

This method destroys the navigationbar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the destroy method.

$('#jqxNavigationBar').jqxNavigationBar('destroy');

Try it: destroy the jqxNavigationBar.

expandAt Method

Expanding item with any index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the expandAt method.

$('#jqxNavigationBar').jqxNavigationBar('expandAt', 3);

Try it: expands an item in the jqxNavigationBar.

enableAt Method

Enabling item with any index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the enableAt method.

$('#jqxNavigationBar').jqxNavigationBar('enableAt', 3);

Try it: enables an item in the jqxNavigationBar.

enable Method

This method is enabling the navigation bar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the enable method.

$('#jqxNavigationBar').jqxNavigationBar('enable');

Try it: enables the jqxNavigationBar.

focus Method

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:

Enter/Spacebar - if the focus is on an item header, collapses or expands the item.
Left/Up arrow - focuses on the previous item header or on the last one if the currently focused is the first one.
Right/Down arrow - focuses on the next item header or on the first one if the currently focused is the last one.
End - focuses on the last item header.
Home - focuses on the first item header.
Tab - focuses on the first header or the next element in the DOM.
Ctrl+Up arrow - if the focus is on an item content, focuses on its respective header.
Ctrl+Down arrow - if the focus is on an item header, focuses on its respective content.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the focus method.

$('#jqxNavigationBar').jqxNavigationBar('focus');

Try it: focuses the jqxNavigationBar.

getHeaderContentAt Method

Getting header content of item with any index. Returns a string value.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the getHeaderContentAt method.

var header = $('#jqxNavigationBar').jqxNavigationBar('getHeaderContentAt',3);

Try it: gets the header's content in the jqxNavigationBar.

getContentAt Method

Getting content of item with any index. Returns a string value.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the getContentAt method.

var content = $('#jqxNavigationBar').jqxNavigationBar('getContentAt', 3);

Try it: gets the content in the jqxNavigationBar.

hideArrowAt Method

Hiding the arrow of an item with specific index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the hideArrowAt method.

$('#jqxNavigationBar').jqxNavigationBar('hideArrowAt', 3);

Try it: hides an arrow of an item in the jqxNavigationBar.

invalidate Method

This method refreshes the navigationbar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the invalidate method.

('#jqxNavigationBar').jqxNavigationBar('invalidate');

Try it: invalidates the jqxNavigationBar.

insert Method

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).

Parameter	Type	Description
Index	Number
item	String
item	String

Return Value
None

Code example

Invoke the insert method.

$('#jqxNavigationBar').jqxNavigationBar('insert', 1, 'Header', 'Content');

Try it: inserts an item in the jqxNavigationBar.

refresh Method

This method refreshes the navigationbar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the refresh method.

$('#jqxNavigationBar').jqxNavigationBar('refresh');

Try it: refreshes the jqxNavigationBar.

render Method

This method renders the navigationbar.

Parameter	Type	Description
None

Return Value
None

Code example

Invoke the render method.

$('#jqxNavigationBar').jqxNavigationBar('render');

Try it: renders the jqxNavigationBar.

remove Method

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.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the remove method.

$('#jqxNavigationBar').jqxNavigationBar('remove', 0);

Try it: removes an item in the jqxNavigationBar.

setContentAt Method

Setting content to item with any index.

Parameter	Type	Description
index	Number
item	String

Return Value
None

Code example

Invoke the setContentAt method.

$('#jqxNavigationBar').jqxNavigationBar('setContentAt', 3, 'Content');

Try it: sets a content in the jqxNavigationBar.

setHeaderContentAt Method

Setting header content to item with any index

Parameter	Type	Description
index	Number
item	String

Return Value
None

Code example

Invoke the setHeaderContentAt method.

$('#jqxNavigationBar').jqxNavigationBar('setHeaderContentAt', 3, 'Header');

Try it: sets new header's content in the jqxNavigationBar.

showArrowAt Method

Showing the arrow of an item with specific index.

Parameter	Type	Description
index	Number

Return Value
None

Code example

Invoke the showArrowAt method.

$('#jqxNavigationBar').jqxNavigationBar('showArrowAt', 3);

Try it: shows the arrow of an item in the jqxNavigationBar.

update Method

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).

Parameter	Type	Description
index	Number
item	String
item	String

Return Value
None

Code example

Invoke the update method.

$('#jqxNavigationBar').jqxNavigationBar('update', 0, 'New header', 'New content');

Try it: updates an item in the jqxNavigationBar.

val Method

Sets or gets the expanded item.

Parameter	Type	Description
value	String

Return Value
String

Code example

Invoke the val method.

// Get the expanded item.

var value = $("#jqxNavigationBar").jqxNavigationBar('val');

// Get the expanded item's index using jQuery's val()

var value = $("#jqxNavigationBar").val();

// Set the expanded item.

$("#jqxNavigationBar").jqxNavigationBar('val', 2);

// Set the expanded item using jQuery's val().

$("#jqxNavigationBar").val(2);

Try it: set the expanded item in the jqxNavigationBar.

Properties

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Events

Code example

Code example

Code example

Code example

Methods

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example

Code example