jQuery NavBar API

Name Type Default

columns Array []

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');

Try it: columns is set to ['30%', '40%', '30%']

disabled Boolean false

Enables/disables the navbar.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Try it: disabled is set to false

height Number/String null

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');

Try it: height is set to 40

minimized Boolean false

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');

Try it: minimized is set to true

minimizeButtonPosition String 'left'

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');

Try it: minimizeButtonPosition is set to "right"

minimizedHeight Number 30

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');

Try it: minimizedHeight is set to 40

minimizedTitle String/HTML Element ""

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');

Try it: minimizedTitle is set to custom element.

orientation String "horizontal"

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');

Try it: orientation is set to "vertical".

popupAnimationDelay Number 250

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');

Try it: popupAnimationDelay is set to 400

rtl Boolean false

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');

Try it: rtl is set to false

selection Boolean true

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');

Try it: selection is set to false

selectedItem Number 0

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');

Try it: selectedItem is set to 1

theme String ''

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="/jquery-widgets-documentation/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' });
```

Try it: theme is set to 'fresh'

width Number/String '100%'

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');

Try it: width is set to '90%'

change Event

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

Try it: Bind to the change event by type: jqxNavBar.

close Method

When NavBar is minimized, closes the popup.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the close method.

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

Try it: closes the popup of minimized NavBar.

destroy Method

Destroys the jqxNavBar widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

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

Try it: destroys the jqxNavBar.

getSelectedIndex Method

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.

Parameter	Type	Description
None

Return Value
Number

Code examples

Invoke the getSelectedIndex method.

// @param Number

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

Try it: returns the selected item's index and displays it

open Method

When NavBar is minimized, opens the popup.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the open method.

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

Try it: opens the popup of minimized NavBar.

selectAt Method

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

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Invoke the selectAt method.

// @param index - Number

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

Try it: selects item in the jqxNavBar

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples