React UI Components Documentation

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

/* 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);

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);

This event is triggered when the current page is changed.

Code examples

Bind to the pageChanged event of jqxScrollView.

/* 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);

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);

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);

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);

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);