Skip to content

Commit dbdfd23

Browse files
jblasjblas
committed
Initial checkin of experimental support for momentum scrolling. We'd really like native browser support for sub-page scrolling, but until then, we need something.
This version supports simulated scrolling via the CSS3 transform property by default, but also supports an option for positioning the old-fashioned way with top and left properties. Still some code clean-up to do, but folks can start playing with it. Some items/issues left to look into: - Experiment with event delegation so we can implement nested scrollviews. - Implement scroll direction locking. - Decide whether to conditionally inject clip/view markup. - Decide on final ui class names. - Decide on how scrolling behavior is actually invoked. (data-* attribute or class) - Decide on final set of notifications we'll need to fire off. - Add an API so that scroll position can be adjusted after a resize/orientation change. - Documentation that describes potential problems with performance, memory usage, etc, and workarounds.
1 parent 42d20b4 commit dbdfd23

File tree

6 files changed

+1095
-0
lines changed

6 files changed

+1095
-0
lines changed

‎experiments/scrollview/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>jQuery Mobile: Demos and Documentation</title>
6+
<link rel="stylesheet" href="../../themes/default" />
7+
<link rel="stylesheet" href="jquery.mobile.scrollview.css" />
8+
<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
9+
<style type="text/css">
10+
.ui-content.ui-scrollview-clip {
11+
padding: 0;
12+
}
13+
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
14+
margin: 0;
15+
padding: 15px;
16+
}
17+
.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
18+
margin: 0;
19+
}
20+
</style>
21+
<script src="../../js"></script>
22+
<script src="jquery.easing.1.3.js"></script>
23+
<script src="jquery.mobile.scrollview.js"></script>
24+
<script src="scrollview.js"></script>
25+
<script src="../themeswitcher/jquery.mobile.themeswitcher.js"></script>
26+
<script src="../../docs/_assets/js/jqm-docs.js"></script>
27+
</head>
28+
<body>
29+
<div data-role="page" data-theme="b" id="jqm-home">
30+
<div id="jqm-homeheader">
31+
<h1 id="jqm-logo"><img src="../../docs/_assets/images/jquery-logo.png" alt="jQuery Mobile Framework" width="235" height="61" /></h1>
32+
<p>A few examples tweaked to make use of the scrollview component.</p>
33+
<p id="jqm-version">Alpha Release</p>
34+
</div>
35+
36+
<div data-role="content">
37+
38+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
39+
<li data-role="list-divider">Toolbars</li>
40+
<li><a href="../../docs/toolbars/footer-persist-a.html">Persistent footer nav bar (a)</a></li>
41+
<li><a href="../../docs/toolbars/footer-persist-b.html">Persistent footer nav bar (b)</a></li>
42+
<li><a href="../../docs/toolbars/footer-persist-c.html">Persistent footer nav bar (c)</a></li>
43+
</ul>
44+
45+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
46+
<li data-role="list-divider">List Views</li>
47+
<li><a href="lists-divider.html">Sticky list dividers</a></li>
48+
</ul>
49+
50+
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
51+
<li data-role="list-divider">Forms</li>
52+
<li><a href="../../docs/forms/forms-all.html">Form element gallery</a></li>
53+
</ul>
54+
</div>
55+
</div>
56+
</body>
57+
</html>

‎experiments/scrollview/jquery.easing.1.3.js‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/*
2+
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
3+
*
4+
* Uses the built in easing capabilities added In jQuery 1.1
5+
* to offer multiple easing options
6+
*
7+
* TERMS OF USE - jQuery Easing
8+
*
9+
* Open source under the BSD License.
10+
*
11+
* Copyright © 2008 George McGinley Smith
12+
* All rights reserved.
13+
*
14+
* Redistribution and use in source and binary forms, with or without modification,
15+
* are permitted provided that the following conditions are met:
16+
*
17+
* Redistributions of source code must retain the above copyright notice, this list of
18+
* conditions and the following disclaimer.
19+
* Redistributions in binary form must reproduce the above copyright notice, this list
20+
* of conditions and the following disclaimer in the documentation and/or other materials
21+
* provided with the distribution.
22+
*
23+
* Neither the name of the author nor the names of contributors may be used to endorse
24+
* or promote products derived from this software without specific prior written permission.
25+
*
26+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
27+
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
28+
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
29+
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
30+
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
31+
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
32+
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
33+
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
34+
* OF THE POSSIBILITY OF SUCH DAMAGE.
35+
*
36+
*/
37+
38+
// t: current time, b: begInnIng value, c: change In value, d: duration
39+
jQuery.easing['jswing'] = jQuery.easing['swing'];
40+
41+
jQuery.extend( jQuery.easing,
42+
{
43+
def: 'easeOutQuad',
44+
swing: function (x, t, b, c, d) {
45+
//alert(jQuery.easing.default);
46+
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
47+
},
48+
easeInQuad: function (x, t, b, c, d) {
49+
return c*(t/=d)*t + b;
50+
},
51+
easeOutQuad: function (x, t, b, c, d) {
52+
return -c *(t/=d)*(t-2) + b;
53+
},
54+
easeInOutQuad: function (x, t, b, c, d) {
55+
if ((t/=d/2) < 1) return c/2*t*t + b;
56+
return -c/2 * ((--t)*(t-2) - 1) + b;
57+
},
58+
easeInCubic: function (x, t, b, c, d) {
59+
return c*(t/=d)*t*t + b;
60+
},
61+
easeOutCubic: function (x, t, b, c, d) {
62+
return c*((t=t/d-1)*t*t + 1) + b;
63+
},
64+
easeInOutCubic: function (x, t, b, c, d) {
65+
if ((t/=d/2) < 1) return c/2*t*t*t + b;
66+
return c/2*((t-=2)*t*t + 2) + b;
67+
},
68+
easeInQuart: function (x, t, b, c, d) {
69+
return c*(t/=d)*t*t*t + b;
70+
},
71+
easeOutQuart: function (x, t, b, c, d) {
72+
return -c * ((t=t/d-1)*t*t*t - 1) + b;
73+
},
74+
easeInOutQuart: function (x, t, b, c, d) {
75+
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
76+
return -c/2 * ((t-=2)*t*t*t - 2) + b;
77+
},
78+
easeInQuint: function (x, t, b, c, d) {
79+
return c*(t/=d)*t*t*t*t + b;
80+
},
81+
easeOutQuint: function (x, t, b, c, d) {
82+
return c*((t=t/d-1)*t*t*t*t + 1) + b;
83+
},
84+
easeInOutQuint: function (x, t, b, c, d) {
85+
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
86+
return c/2*((t-=2)*t*t*t*t + 2) + b;
87+
},
88+
easeInSine: function (x, t, b, c, d) {
89+
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
90+
},
91+
easeOutSine: function (x, t, b, c, d) {
92+
return c * Math.sin(t/d * (Math.PI/2)) + b;
93+
},
94+
easeInOutSine: function (x, t, b, c, d) {
95+
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
96+
},
97+
easeInExpo: function (x, t, b, c, d) {
98+
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
99+
},
100+
easeOutExpo: function (x, t, b, c, d) {
101+
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
102+
},
103+
easeInOutExpo: function (x, t, b, c, d) {
104+
if (t==0) return b;
105+
if (t==d) return b+c;
106+
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
107+
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
108+
},
109+
easeInCirc: function (x, t, b, c, d) {
110+
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
111+
},
112+
easeOutCirc: function (x, t, b, c, d) {
113+
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
114+
},
115+
easeInOutCirc: function (x, t, b, c, d) {
116+
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
117+
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
118+
},
119+
easeInElastic: function (x, t, b, c, d) {
120+
var s=1.70158;var p=0;var a=c;
121+
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
122+
if (a < Math.abs(c)) { a=c; var s=p/4; }
123+
else var s = p/(2*Math.PI) * Math.asin (c/a);
124+
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
125+
},
126+
easeOutElastic: function (x, t, b, c, d) {
127+
var s=1.70158;var p=0;var a=c;
128+
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
129+
if (a < Math.abs(c)) { a=c; var s=p/4; }
130+
else var s = p/(2*Math.PI) * Math.asin (c/a);
131+
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
132+
},
133+
easeInOutElastic: function (x, t, b, c, d) {
134+
var s=1.70158;var p=0;var a=c;
135+
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
136+
if (a < Math.abs(c)) { a=c; var s=p/4; }
137+
else var s = p/(2*Math.PI) * Math.asin (c/a);
138+
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
139+
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
140+
},
141+
easeInBack: function (x, t, b, c, d, s) {
142+
if (s == undefined) s = 1.70158;
143+
return c*(t/=d)*t*((s+1)*t - s) + b;
144+
},
145+
easeOutBack: function (x, t, b, c, d, s) {
146+
if (s == undefined) s = 1.70158;
147+
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
148+
},
149+
easeInOutBack: function (x, t, b, c, d, s) {
150+
if (s == undefined) s = 1.70158;
151+
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
152+
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
153+
},
154+
easeInBounce: function (x, t, b, c, d) {
155+
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
156+
},
157+
easeOutBounce: function (x, t, b, c, d) {
158+
if ((t/=d) < (1/2.75)) {
159+
return c*(7.5625*t*t) + b;
160+
} else if (t < (2/2.75)) {
161+
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
162+
} else if (t < (2.5/2.75)) {
163+
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
164+
} else {
165+
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
166+
}
167+
},
168+
easeInOutBounce: function (x, t, b, c, d) {
169+
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
170+
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
171+
}
172+
});
173+
174+
/*
175+
*
176+
* TERMS OF USE - EASING EQUATIONS
177+
*
178+
* Open source under the BSD License.
179+
*
180+
* Copyright © 2001 Robert Penner
181+
* All rights reserved.
182+
*
183+
* Redistribution and use in source and binary forms, with or without modification,
184+
* are permitted provided that the following conditions are met:
185+
*
186+
* Redistributions of source code must retain the above copyright notice, this list of
187+
* conditions and the following disclaimer.
188+
* Redistributions in binary form must reproduce the above copyright notice, this list
189+
* of conditions and the following disclaimer in the documentation and/or other materials
190+
* provided with the distribution.
191+
*
192+
* Neither the name of the author nor the names of contributors may be used to endorse
193+
* or promote products derived from this software without specific prior written permission.
194+
*
195+
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
196+
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
197+
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
198+
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
199+
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
200+
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
201+
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
202+
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
203+
* OF THE POSSIBILITY OF SUCH DAMAGE.
204+
*
205+
*/

‎experiments/scrollview/jquery.mobile.scrollview.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@charset "utf-8";
2+
3+
.ui-scrollview-clip {
4+
overflow: hidden;
5+
position: relative;
6+
}
7+
8+
.ui-scrollview-view {
9+
position: relative;
10+
overflow: hidden;
11+
top: 0;
12+
left: 0;
13+
/*
14+
min-width: 100%;
15+
min-height: 100%;
16+
padding: 0;
17+
margin: 0;
18+
*/
19+
}
20+
21+
.ui-scrolllistview .ui-li-divider {
22+
z-index: 10;
23+
}
24+
25+
.ui-scrollbar {
26+
position: absolute;
27+
overflow: hidden;
28+
29+
opacity: 0;
30+
-webkit-transition: opacity 500ms;
31+
-moz-transition: opacity 500ms;
32+
transition: opacity 500ms;
33+
}
34+
35+
.ui-scrollbar-visible {
36+
opacity: 1;
37+
}
38+
39+
.ui-scrollbar-vertical {
40+
top: 2px;
41+
right: 2px;
42+
bottom: 8px;
43+
width: 5px;
44+
}
45+
46+
.ui-scrollbar-horizontal {
47+
right: 8px;
48+
bottom: 2px;
49+
left: 2px;
50+
height: 5px;
51+
}
52+
53+
.ui-scrollbar-track {
54+
position: relative;
55+
width: 100%;
56+
height: 100%;
57+
}
58+
59+
.ui-scrollbar-thumb {
60+
position: absolute;
61+
top: 0;
62+
left: 0;
63+
background-color: rgba(0, 0, 0, 0.3);
64+
-moz-border-radius: 2px;
65+
-webkit-border-radius: 2px;
66+
border-radius: 2px;
67+
}
68+
69+
.ui-scrollbar-vertical .ui-scrollbar-thumb {
70+
width: 5px;
71+
height: 100%;
72+
}
73+
74+
.ui-scrollbar-horizontal .ui-scrollbar-thumb {
75+
width: 100%;
76+
height: 5px;
77+
}

0 commit comments

Comments
 (0)