React UI Components
Show Demo List
|
|
|
ReactJS Scrollview demo. jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title id='Description'>
ReactJS Scrollview demo. jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.
</title>
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.arctic.css" type="text/css" />
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<style type="text/css">
.photo {
width: 600px;
height: 450px;
background-color: #000;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="example-description" style="margin-bottom:3em">
ReactJS Scrollview demo. jqxScrollView represents a widget which can be used for viewing content which is wider than the visible area outlined by the device's screen. Specific item can be chosen using drag movements or clicking/tapping on the buttons at the bottom of the jqxScrollView.
</div>
<div id="app"></div>
<script src="../build/scrollview_defaultfunctionality.bundle.js"></script>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import JqxScrollView from '../../../jqwidgets-react/react_jqxscrollview.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
class App extends React.Component {
componentDidMount() {
this.refs.myStartButton.on('click', () => {
this.refs.myScrollView.slideShow(true);
});
this.refs.myStopButton.on('click', () => {
this.refs.myScrollView.slideShow(false);
});
}
render () {
let scrollViewHTML = `
<div><div class="photo" style="background-image: url(../../../images/imageNature1.jpg)"></div></div>
<div><div class="photo" style="background-image: url(../../../images/imageNature2.jpg)"></div></div>
<div><div class="photo" style="background-image: url(../../../images/imageNature3.jpg)"></div></div>
<div><div class="photo" style="background-image: url(../../../images/imageNature4.jpg)"></div></div>
<div><div class="photo" style="background-image: url(../../../images/imageNature5.jpg)"></div></div>
`;
return (
<div>
<JqxScrollView ref='myScrollView' template={scrollViewHTML}
width={600} height={450} buttonsOffset={[0, 0]}
/>
<div style={{ marginTop: 20 }}>
<JqxButton ref='myStartButton' value="Start Slideshow" style={{ float: 'left', display: 'inline-block' }}
width={150} height={25}
/>
<JqxButton ref='myStopButton' style={{ float: 'left', marginLeft: 5 }} value="Stop Slideshow"
width={150} height={25}
/>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
