|
animationDuration
|
number
|
30
|
Sets or gets the animationDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { animationDuration:3000, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
bounceEnabled
|
boolean
|
true
|
Sets or gets the bounceEnabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { bounceEnabled:false, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
buttonsOffset
|
array
|
[0, 0]
|
Sets or gets the buttonsOffset property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
currentPage
|
number
|
0
|
Sets or gets the currentPage property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { currentPage:1, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { disabled:true, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
height
|
string
|
320
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
moveThreshold
|
number
|
0.5
|
Sets or gets the moveThreshold property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { moveThreshold:1, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
showButtons
|
boolean
|
true
|
Sets or gets the showButtons property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { showButtons:false, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
slideShow
|
boolean
|
true
|
Sets or gets the slideShow property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { slideShow:false, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
slideDuration
|
number
|
3000
|
Sets or gets the slideDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { slideDuration:300, theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
width
|
string
|
320
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { theme: "light" } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
|
|
pageChanged
|
Event
|
|
Code examples
Bind to the pageChanged event of jqxScrollView.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { } window.onload = function() { document.querySelector( "jqx-scroll-view").addEventListener("pageChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
|
|
back
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { } window.onload = function() { document.querySelector( "jqx-scroll-view").back(); } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
changePage
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { } window.onload = function() { document.querySelector( "jqx-scroll-view").changePage(); } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
forward
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { } window.onload = function() { document.querySelector( "jqx-scroll-view").forward(); } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
|
refresh
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>ScrollView Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollview.js"></script> <script> JQXElements.settings[ "scrollViewSettings"] = { } window.onload = function() { document.querySelector( "jqx-scroll-view").refresh(); } </script></head><body> <jqx-scroll-view settings="scrollViewSettings"> <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>
|
