| Name | Type | Default |
|---|
|
animationType
|
enum:NavigationBarAnimationType
|
'slide'
|
enum NavigationBarAnimationType { none, slide, fade } Sets or gets the animationType property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [animationType]="'fade'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
arrowPosition
|
enum:NavigationBarArrowPosition
|
'right'
|
enum NavigationBarArrowPosition { left, right } Sets or gets the arrowPosition property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [arrowPosition]="'left'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
collapseAnimationDuration
|
Number
|
400
|
Sets or gets the collapseAnimationDuration property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [collapseAnimationDuration]="3000">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [disabled]="true">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
expandAnimationDuration
|
Number
|
400
|
Sets or gets the expandAnimationDuration property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [expandAnimationDuration]="3000">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
expandMode
|
enum:NavigationBarExpandMode
|
'singleFitHeight'
|
enum NavigationBarExpandMode { single, singleFitHeight, multiple, toggle, none } Sets or gets the expandMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [expandMode]="'single'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
expandedIndexes
|
Array<Number>
|
[]
|
Sets or gets the expandedIndexes property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [expandedIndexes]="[0, 1]">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
height
|
String | Number
|
'auto'
|
Sets or gets the height property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
initContent
|
(index:Number) => Void
|
null
|
Sets or gets the initContent property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [initContent]="initContent">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [rtl]="true">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
showArrow
|
Boolean
|
true
|
Sets or gets the showArrow property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [showArrow]="false">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [theme]="'energyblue'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
toggleMode
|
enum:NavigationBarToggleMode
|
click
|
enum NavigationBarToggleMode { click, dblclick, none } Sets or gets the toggleMode property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300" [toggleMode]="'dblclick'">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
width
|
String | Number
|
'auto'
|
Sets or gets the width property.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
}
|
|
|
|
collapsingItem
|
Event
|
|
This event is triggered when a jqxNavigationBar item is going to be collapsed.
Code examples
Bind to the collapsingItem event of jqxNavigationBar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar (onCollapsingItem)="CollapsingItem($event)"
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
CollapsingItem(event: any): void
{
// Do Something
}
}
|
|
collapsedItem
|
Event
|
|
This event is triggered when a jqxNavigationBar item is collapsed.
Code examples
Bind to the collapsedItem event of jqxNavigationBar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar (onCollapsedItem)="CollapsedItem($event)"
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
CollapsedItem(event: any): void
{
// Do Something
}
}
|
|
expandingItem
|
Event
|
|
This event is triggered when a jqxNavigationBar item is going to be expanded.
Code examples
Bind to the expandingItem event of jqxNavigationBar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar (onExpandingItem)="ExpandingItem($event)"
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
ExpandingItem(event: any): void
{
// Do Something
}
}
|
|
expandedItem
|
Event
|
|
This event is triggered when a jqxNavigationBar item is expanded.
Code examples
Bind to the expandedItem event of jqxNavigationBar.
import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar (onExpandedItem)="ExpandedItem($event)"
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent {
ExpandedItem(event: any): void
{
// Do Something
}
}
|
|
|
| Name | Return Type | Arguments |
|---|
|
add
|
Void
|
header: String | Number,
content: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.add(1,'Header','Content');
}
}
|
|
collapseAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.collapseAt(1);
}
}
|
|
disableAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.disableAt(1);
}
}
|
|
disable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.disable();
}
}
|
|
destroy
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.destroy();
}
}
|
|
expandAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.expandAt(1);
}
}
|
|
enableAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.enableAt(1);
}
}
|
|
enable
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.enable();
}
}
|
|
focus
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.focus();
}
}
|
|
getHeaderContentAt
|
String
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
let value = this.myNavigationBar.getHeaderContentAt(1);
}
}
|
|
getContentAt
|
String
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
let value = this.myNavigationBar.getContentAt(1);
}
}
|
|
hideArrowAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.hideArrowAt(1);
}
}
|
|
invalidate
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.invalidate();
}
}
|
|
insert
|
Void
|
Index: Number,
header: String | Number,
content: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.insert(1,'Header','Content');
}
}
|
|
refresh
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.refresh();
}
}
|
|
render
|
Void
|
None
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.render();
}
}
|
|
remove
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.remove(1);
}
}
|
|
setContentAt
|
Void
|
index: Number,
item: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.setContentAt(1,'Content');
}
}
|
|
setHeaderContentAt
|
Void
|
index: Number,
item: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.setHeaderContentAt(1,'Header');
}
}
|
|
showArrowAt
|
Void
|
index: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.showArrowAt(1);
}
}
|
|
update
|
Void
|
index: Number,
header: String | Number,
content: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
this.myNavigationBar.update(1,'Title','Content');
}
}
|
|
val
|
String | Number
|
value: String | Number
|
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxNavigationBar #myNavigationBar
[width]="400" [height]="300">
<div>Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
</ul>
</div>
<div>Merging the networks and creating the Internet</div>
<div>
<ul>
<li>1981 Computer Science Network (CSNET)</li>
<li>1982 TCP/IP protocol suite formalized</li>
</ul>
</div>
<div>Popular Internet services</div>
<div>
<ul>
<li>1990 IMDb Internet movie database</li>
<li>1995 Amazon.com online retailer</li>
</ul>
</div>
</jqxNavigationBar>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myNavigationBar') myNavigationBar: jqxNavigationBarComponent;
ngAfterViewInit(): void
{
let value = this.myNavigationBar.val(1);
}
}
|