Getting Started

jqxNavigationBar represents a UI Component that has header and content sections(like tabs). Click headers to expand or collapse the content. Optionally you can change the default toggle mode to double-click or mouseover.

Every ASP .NET Core Mvc Tag Helper from jQWidgets toolkit needs its JavaScript files to be included in order to work properly.

jqxNavigationBar requires the following files:

• CSS

• jqx.base.css

• Javascript

• jqxcore.js
• jqxbuttons.js
• jqxscrollbar.js
• jqxlistbox.js
• jqxNavigationBar.js

The next step is to create html element within the body of the html document and add the initialization attributes.

<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar animation-type="fade">
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>  
</jqx-navigation-bar>

To call a function(method), you need to pass the method name and parameters(if any) in the UI component’s instance.

<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar instance="getInstance()">
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>  
</jqx-navigation-bar>
							
@section scripts {								
<script type="text/javascript">									
	function getInstance(instance) {									
		instance["add"](1,'Header','Content');									
	}									
</script>									
}

To bind to an event of a UI Component, you can use on-event-type syntax. The example code below demonstrates how to bind to an event.

<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar on-collapsing-item="eventHandler()">
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>
    <jqx-navigation-bar-panel>
        <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header>
        <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body>
    </jqx-navigation-bar-panel>  
</jqx-navigation-bar>
							
@section scripts {								
<script type="text/javascript">									
	function eventHandler(event) {									
	}									
</script>									
}

Basic Sample