Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".

Code examples

Set the columns property.

$("#jqxNavBar").jqxNavBar({ columns: ['30%', '70%'});

Get the columns property.

var columns = $('#jqxNavBar').jqxNavBar('columns');

Enables/disables the navbar.

Code examples

Set the disabled property.

$("#jqxNavBar").jqxNavBar({ disabled: false });

Get the disabled property.

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

Sets or gets the NavBar's height.

Code examples

Set the height property.

$("#jqxNavBar").jqxNavBar({ height: 30 });

Get the height property.

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

Defines whether the NavBar is minimized.

Code examples

Set the minimized property.

$("#jqxNavBar").jqxNavBar({ minimized: true);

Get the minimized property.

var minimized = $('#jqxNavBar').jqxNavBar('minimized');

Defines the position of the Toggle Button in the minimized state.

Code examples

Set the minimizeButtonPosition property.

$("#jqxNavBar").jqxNavBar({ minimizeButtonPosition: "right");

Get the minimizeButtonPosition property.

var minimizeButtonPosition = $('#jqxNavBar').jqxNavBar('minimizeButtonPosition');

Defines the NavBar's height in minimized state.

Code examples

Set the minimizedHeight property.

$("#jqxNavBar").jqxNavBar({ minimizedHeight: 40);

Get the minimizedHeight property.

var minimizedHeight = $('#jqxNavBar').jqxNavBar('minimizedHeight');

Defines the NavBar's Title in minimized state.

Code examples

Set the minimizedTitle property.

$("#jqxNavBar").jqxNavBar({ minimizedTitle: 'Title');

Get the minimizedTitle property.

var minimizedTitle = $('#jqxNavBar').jqxNavBar('minimizedTitle');

Defines the NavBar's orientation. Possible values: "horizontal", "vertical".

Code examples

Set the orientation property.

$("#jqxNavBar").jqxNavBar({ orientation: 'vertical');

Get the orientation property.

var orientation = $('#jqxNavBar').jqxNavBar('orientation');

Defines the animation speed of the NavBar's Popup in minimized state.

Code examples

Set the popupAnimationDelay property.

$("#jqxNavBar").jqxNavBar({ popupAnimationDelay: 400);

Get the minimized property.

var popupAnimationDelay = $('#jqxNavBar').jqxNavBar('popupAnimationDelay');

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code examples

Set the rtl property.

$("#jqxNavBar").jqxNavBar({ rtl: false});

Get the rtl property.

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

Sets or gets whether the items can be selected.

Code examples

Set the selection property.

$("#jqxNavBar").jqxNavBar({ selection: false });

Get the selection property.

var selection = $('#jqxNavBar').jqxNavBar('selection');

Sets or gets the selected item. The property is taken into account when selection is true.

Code examples

Set the selectedItem property.

$("#jqxNavBar").jqxNavBar({ selectedItem: 0 });

Get the selectedItem property.

var selectedItem = $('#jqxNavBar').jqxNavBar('selectedItem');

Sets the widget's theme.

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:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'fresh' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"/>
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.fresh.css" type="text/css" />

• Set the widget's theme property to 'fresh' when you initialize it.

  $('#jqxNavBar').jqxNavBar({ theme: 'fresh' });

Sets or gets the NavBar's width.

Code examples

Set the width property.

$("#jqxNavBar").jqxNavBar({ width: '90%' });

Get the width property.

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

This event is triggered when the user selects an item.

Code examples

Bind to the change event by type: jqxNavBar.

$('#jqxNavBar').on('change', function () { // Some code here. }); 

When NavBar is minimized, closes the popup.

Code examples

Invoke the close method.

$("#jqxNavBar").jqxNavBar('close'); 

Destroys the jqxNavBar widget.

Code examples

Invoke the destroy method.

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

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

Code examples

Invoke the getSelectedIndex method.

// @param Number

var index = $("#jqxNavBar").jqxNavBar('getSelectedIndex'); 

When NavBar is minimized, opens the popup.

Code examples

Invoke the open method.

$("#jqxNavBar").jqxNavBar('open'); 

Selects the item with indicated index. Index is a number.

Code examples

Invoke the selectAt method.

// @param index - Number

$('#jqxNavBar').jqxNavBar('selectAt', 1);