jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
43 lines (39 loc) • 1.91 kB
JavaScript
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'));