| Name | Type | Default |
|---|---|---|
| animationDuration | number | 30 |
|
Sets or gets the animationDuration property. Specifies the duration of the animation which starts when the current page is changed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} animationDuration={3000}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| bounceEnabled | boolean | true |
|
Sets or gets whether the bounce effect is enabled when pages are changed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} bounceEnabled={false}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| buttonsOffset | Array<number> | [0, 0] |
|
Sets or gets the jqxScrollView's buttonsOffset property. This property sets the offset from the default location of the navigation buttons. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} buttonsOffset={[100, 0]}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| currentPage | number | 0 |
|
Sets or gets the jqxScrollView's currentPage property. The currentPage specifies the displayed element. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} currentPage={1}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| disabled | boolean | false |
|
Sets or gets the jqxScrollView's disabled property. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} disabled={true}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| height | string | number | 320 |
|
Sets or gets the jqxScrollView's height. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| moveThreshold | number | 0.5 |
|
Sets or gets the jqxScrollView's moveThreshold property. The moveThreshold property specifies how much the user should drag the current element to navigate to next/previous element. Values should be set from 0.1 to 1. 0.5 means 50% of the element's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} moveThreshold={1}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| showButtons | boolean | true |
|
Sets or gets whether the navigation buttons are visible. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} showButtons={false}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| slideShow | boolean | false |
|
Indicates whether the slideShow mode is enabled. In this mode, pages are changed automatically in a time interval. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} slideShow={true}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| slideDuration | number | 3000 |
|
Sets or gets the duration in milliseconds of a time interval. The current page is changed when the time interval is elapsed. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} slideShow={true} slideDuration={1000}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450} theme={'material'}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| width | string | number | 320 |
|
Sets or gets the jqxScrollView's width. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| pageChanged | Event | |
|
This event is triggered when the current page is changed. Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public render() {
return (
<JqxScrollView ref={this.myScrollView} onPageChanged={this.onPageChanged}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
private onPageChanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| back | None | |
|
Navigates to the previous page. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public componentDidMount(): void {
this.myScrollView.current!.back();
}
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| changePage | index | |
|
Navigates to a page. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public componentDidMount(): void {
this.myScrollView.current!.changePage(1);
}
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| forward | None | |
|
Navigates to the next page. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public componentDidMount(): void {
this.myScrollView.current!.forward();
}
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| refresh | None | |
|
Refreshes the widget. /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxScrollView, { IScrollViewProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxscrollview';
class App extends React.PureComponent<{}, IScrollViewProps> {
private myScrollView = React.createRef<JqxScrollView>();
public componentDidMount(): void {
this.myScrollView.current!.refresh();
}
public render() {
return (
<JqxScrollView ref={this.myScrollView}
width={600} height={450}>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div>
</JqxScrollView>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||