React UI Components Documentation

Sets or gets the animationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} animationDuration={3000}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the bounceEnabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} bounceEnabled={false}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the buttonsOffset property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the currentPage property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} currentPage={1}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} disabled={true}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the moveThreshold property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} moveThreshold={1}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} showButtons={false}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the slideShow property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} slideShow={false}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the slideDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} slideDuration={300}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]} theme={'energyblue'}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the current page is changed.

Code examples

Bind to the pageChanged event of jqxScrollView.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollView.on('pageChanged', (event) => {
            // Do Something...
        });
    }

    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollView.back();
    }

    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollView.changePage();
    }

    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollView.forward();
    }

    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxScrollView from 'jqwidgets-react/react_jqxscrollview.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myScrollView.refresh();
    }

    render() {       
        let photo = {
            width: 600,
            height: 450,
            backgroundColor: '#000',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
        };
        return (
            <JqxScrollView ref='myScrollView' 
                {width}=600 height={450} buttonsOffset={[0, 0]}>
                <div><div style={photo} style="background-image: url(../images/imageNature1.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature2.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature3.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature4.jpg)"></div></div>
                <div><div style={photo} style="background-image: url(../images/imageNature5.jpg)"></div></div>
            </JqxScrollView>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));