| animationType | string | 'slide' |
|
Sets or gets the <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>
|
||
| arrowPosition | string | 'right' |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar arrow-position="left">
<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>
|
||
| collapseAnimationDuration | int | 400 |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar collapse-animation-duration="3000">
<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>
|
||
| disabled | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar disabled="true">
<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>
|
||
| expandAnimationDuration | int | 400 |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar expand-animation-duration="3000">
<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>
|
||
| expandMode | string | 'singleFitHeight' |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar expand-mode="single">
<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>
|
||
| expandedIndexes | List<string> | [] |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar expanded-indexes="[0, 1]">
<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>
|
||
| height | int | 'auto' |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar height="200">
<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>
|
||
| initContent | string | null |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar init-content="initContent">
<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>
|
||
| rtl | bool | false |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar rtl="true">
<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>
|
||
| showArrow | bool | true |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar show-arrow="false">
<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>
|
||
| theme | string | '' |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar theme="energyblue">
<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>
|
||
| toggleMode | string | click |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar toggle-mode="dblclick">
<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>
|
||
| width | int | 'auto' |
|
Sets or gets the <script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar width="400">
<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>
|
||
Events |
||
| collapsingItem | Event | |
Code examples
Bind to the
<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>
}
|
||
| collapsedItem | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar on-collapsed-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>
}
|
||
| expandingItem | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar on-expanding-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>
}
|
||
| expandedItem | Event | |
Code examples
Bind to the
<script src="~/jqwidgets/jqxnavigationbar.js"></script>
<jqx-navigation-bar on-expanded-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>
}
|
||
Methods |
||
| add | Method | |
<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>
}
|
||
| collapseAt | Method | |
<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["collapseAt"](1);
}
</script>
}
|
||
| disableAt | Method | |
<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["disableAt"](1);
}
</script>
}
|
||
| disable | Method | |
<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["disable"]();
}
</script>
}
|
||
| destroy | Method | |
<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["destroy"]();
}
</script>
}
|
||
| expandAt | Method | |
<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["expandAt"](1);
}
</script>
}
|
||
| enableAt | Method | |
<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["enableAt"](1);
}
</script>
}
|
||
| enable | Method | |
<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["enable"]();
}
</script>
}
|
||
| focus | Method | |
<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["focus"]();
}
</script>
}
|
||
| getHeaderContentAt | Method | |
<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["getHeaderContentAt"](1);
}
</script>
}
|
||
| getContentAt | Method | |
<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["getContentAt"](1);
}
</script>
}
|
||
| hideArrowAt | Method | |
<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["hideArrowAt"](1);
}
</script>
}
|
||
| invalidate | Method | |
<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["invalidate"]();
}
</script>
}
|
||
| insert | Method | |
<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["insert"](1,'Header','Content');
}
</script>
}
|
||
| refresh | Method | |
<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["refresh"]();
}
</script>
}
|
||
| render | Method | |
<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["render"]();
}
</script>
}
|
||
| remove | Method | |
<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["remove"](1);
}
</script>
}
|
||
| setContentAt | Method | |
<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["setContentAt"](1,'Content');
}
</script>
}
|
||
| setHeaderContentAt | Method | |
<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["setHeaderContentAt"](1,'Header');
}
</script>
}
|
||
| showArrowAt | Method | |
<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["showArrowAt"](1);
}
</script>
}
|
||
| update | Method | |
<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["update"](1,'Title','Content');
}
</script>
}
|
||
| val | Method | |
<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["val"](1);
}
</script>
}
|
||