Name | Type | Default |
animationDuration
|
Number
|
30
|
Sets or gets the animationDuration property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [animationDuration]="3000">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
bounceEnabled
|
Boolean
|
true
|
Sets or gets the bounceEnabled property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [bounceEnabled]="false">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
buttonsOffset
|
Array<Number>
|
[0, 0]
|
Sets or gets the buttonsOffset property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
currentPage
|
Number
|
0
|
Sets or gets the currentPage property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [currentPage]="1">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
disabled
|
Boolean
|
false
|
Sets or gets the disabled property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [disabled]="true">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
height
|
String | Number
|
320
|
Sets or gets the height property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
moveThreshold
|
Number
|
0.5
|
Sets or gets the moveThreshold property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [moveThreshold]="1">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
showButtons
|
Boolean
|
true
|
Sets or gets the showButtons property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [showButtons]="false">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
slideShow
|
Boolean
|
true
|
Sets or gets the slideShow property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [slideShow]="false">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
slideDuration
|
"Number,
|
3000
|
Sets or gets the slideDuration property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [slideDuration]="300">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
theme
|
String
|
''
|
Sets or gets the theme property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]" [theme]="'energyblue'">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
width
|
String | Number
|
320
|
Sets or gets the width property.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
}
|
|
pageChanged
|
Event
|
|
This event is triggered when the current page is changed.
Code examples
Bind to the pageChanged event of jqxScrollView.
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView(onPageChanged)="PageChanged($event)"
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent {
PageChanged(event: any): void
{
// Do Something
}
}
|
|
Name | Return Type | Arguments |
back
|
Void
|
None
|
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScrollView') myScrollView: jqxScrollViewComponent;
ngAfterViewInit(): void
{
this.myScrollView.back();
}
}
|
changePage
|
Void
|
index: Number
|
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScrollView') myScrollView: jqxScrollViewComponent;
ngAfterViewInit(): void
{
this.myScrollView.changePage();
}
}
|
forward
|
Void
|
None
|
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScrollView') myScrollView: jqxScrollViewComponent;
ngAfterViewInit(): void
{
this.myScrollView.forward();
}
}
|
refresh
|
Void
|
None
|
import { Component, ViewEncapsulation, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxScrollView #myScrollView
[width]="600" [height]="450" [buttonsOffset]="[0, 0]">
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(/angular-components-documentation/documentation/images/imageNature5.jpg)"></div></div>
</jqxScrollView>,
styles: [`
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
`],
encapsulation: ViewEncapsulation.None
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myScrollView') myScrollView: jqxScrollViewComponent;
ngAfterViewInit(): void
{
this.myScrollView.refresh();
}
}
|