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> } |