ASP .NET Core MVC Documentation
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
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 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 bind to an event of a UI Component, you can use<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>}
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>}