html5代码
001 | <!DOCTYPE html> |
002 | < html > |
003 | < head > |
004 | < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > |
005 | < meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" > |
006 | < meta name = "apple-mobile-web-app-capable" content = "yes" > |
007 | < meta name = "apple-mobile-web-app-status-bar-style" content = "black" > |
008 | < title >html5+css3实现上拉和下拉刷新</ title > |
009 |
010 | < script type = "text/javascript" src = "http://statics.webkfa.com/js/iscroll.js" ></ script > |
011 |
012 | < script type = "text/javascript" > |
013 |
014 | var myScroll, |
015 | pullDownEl, pullDownOffset, |
016 | pullUpEl, pullUpOffset, |
017 | generatedCount = 0; |
018 |
019 | function pullDownAction () { |
020 | setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! |
021 | var el, li, i; |
022 | el = document.getElementById('thelist'); |
023 |
024 | for (i=0; i< 3 ; i++) { |
025 | li = document .createElement('li'); |
026 | li.innerText = 'Generated row ' + (++generatedCount); |
027 | el.insertBefore(li, el.childNodes[0]); |
028 | } |
029 | |
030 | myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion) |
031 | }, 1000); // <-- Simulate network congestion, remove setTimeout from production! |
032 | } |
033 |
034 | function pullUpAction () { |
035 | setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! |
036 | var el, li, i; |
037 | el = document .getElementById('thelist'); |
038 |
039 | for ( i = 0 ; i<3; i++) { |
040 | li = document .createElement('li'); |
041 | li.innerText = 'Generated row ' + (++generatedCount); |
042 | el.appendChild(li, el.childNodes[0]); |
043 | } |
044 | |
045 | myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion) |
046 | }, 1000); // <-- Simulate network congestion, remove setTimeout from production! |
047 | } |
048 |
049 | function loaded() { |
050 | pullDownEl = document .getElementById('pullDown'); |
051 | pullDownOffset = pullDownEl .offsetHeight; |
052 | pullUpEl = document .getElementById('pullUp'); |
053 | pullUpOffset = pullUpEl .offsetHeight; |
054 | |
055 | myScroll = new iScroll('wrapper', { |
056 | useTransition: true, |
057 | topOffset: pullDownOffset, |
058 | onRefresh: function () { |
059 | if (pullDownEl.className.match('loading')) { |
060 | pullDownEl.className = '' ; |
061 | pullDownEl.querySelector('.pullDownLabel') .innerHTML = 'Pull down to refresh...' ; |
062 | } else if (pullUpEl.className.match('loading')) { |
063 | pullUpEl.className = '' ; |
064 | pullUpEl.querySelector('.pullUpLabel') .innerHTML = 'Pull up to load more...' ; |
065 | } |
066 | }, |
067 | onScrollMove: function () { |
068 | if (this.y > 5 && !pullDownEl.className.match('flip')) { |
069 | pullDownEl.className = 'flip'; |
070 | pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...'; |
071 | this.minScrollY = 0; |
072 | } else if (this.y < 5 && pullDownEl.className.match('flip')) { |
073 | pullDownEl.className = '' ; |
074 | pullDownEl.querySelector('.pullDownLabel') .innerHTML = 'Pull down to refresh...' ; |
075 | this.minScrollY = -pullDownOffset; |
076 | } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { |
077 | pullUpEl.className = 'flip' ; |
078 | pullUpEl.querySelector('.pullUpLabel') .innerHTML = 'Release to refresh...' ; |
079 | this.maxScrollY = this.maxScrollY; |
080 | } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { |
081 | pullUpEl.className = ''; |
082 | pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...'; |
083 | this.maxScrollY = pullUpOffset; |
084 | } |
085 | }, |
086 | onScrollEnd: function () { |
087 | if (pullDownEl.className.match('flip')) { |
088 | pullDownEl.className = 'loading'; |
089 | pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...'; |
090 | pullDownAction(); // Execute custom function (ajax call?) |
091 | } else if (pullUpEl.className.match('flip')) { |
092 | pullUpEl.className = 'loading'; |
093 | pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...'; |
094 | pullUpAction(); // Execute custom function (ajax call?) |
095 | } |
096 | } |
097 | }); |
098 | |
099 | setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); |
100 | } |
101 |
102 | document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); |
103 |
104 | document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); |
105 | </ script > |
106 |
107 | < style type = "text/css" media = "all" > |
108 | body,ul,li { |
109 | padding:0; |
110 | margin:0; |
111 | border:0; |
112 | } |
113 |
114 | body { |
115 | font-size:12px; |
116 | -webkit-user-select:none; |
117 | -webkit-text-size-adjust:none; |
118 | font-family:helvetica; |
119 | } |
120 |
121 | #header { |
122 | position:absolute; z-index:2; |
123 | top:0; left:0; |
124 | width:100%; |
125 | height:45px; |
126 | line-height:45px; |
127 | background-color:#d51875; |
128 | background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); |
129 | background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); |
130 | background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); |
131 | padding:0; |
132 | color:#eee; |
133 | font-size:20px; |
134 | text-align:center; |
135 | } |
136 |
137 | #header a { |
138 | color:#f3f3f3; |
139 | text-decoration:none; |
140 | font-weight:bold; |
141 | text-shadow:0 -1px 0 rgba(0,0,0,0.5); |
142 | } |
143 |
144 | #footer { |
145 | position:absolute; z-index:2; |
146 | bottom:0; left:0; |
147 | width:100%; |
148 | height:48px; |
149 | background-color:#222; |
150 | background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); |
151 | background-image:-moz-linear-gradient(top, #999, #666 2%, #222); |
152 | background-image:-o-linear-gradient(top, #999, #666 2%, #222); |
153 | padding:0; |
154 | border-top:1px solid #444; |
155 | } |
156 |
157 | #wrapper { |
158 | position:absolute; z-index:1; |
159 | top:45px; bottom:48px; left:-9999px; |
160 | width:100%; |
161 | background:#aaa; |
162 | overflow:auto; |
163 | } |
164 |
165 | #scroller { |
166 | position:absolute; z-index:1; |
167 | /* -webkit-touch-callout:none;*/ |
168 | -webkit-tap-highlight-color:rgba(0,0,0,0); |
169 | width:100%; |
170 | padding:0; |
171 | } |
172 |
173 | #scroller ul { |
174 | list-style:none; |
175 | padding:0; |
176 | margin:0; |
177 | width:100%; |
178 | text-align:left; |
179 | } |
180 |
181 | #scroller li { |
182 | padding:0 10px; |
183 | height:40px; |
184 | line-height:40px; |
185 | border-bottom:1px solid #ccc; |
186 | border-top:1px solid #fff; |
187 | background-color:#fafafa; |
188 | font-size:14px; |
189 | } |
190 |
191 | #myFrame { |
192 | position:absolute; |
193 | top:0; left:0; |
194 | } |
195 |
196 |
197 |
198 | /** |
199 | * |
200 | * Pull down styles |
201 | * |
202 | */ |
203 | #pullDown, #pullUp { |
204 | background:#fff; |
205 | height:40px; |
206 | line-height:40px; |
207 | padding:5px 10px; |
208 | border-bottom:1px solid #ccc; |
209 | font-weight:bold; |
210 | font-size:14px; |
211 | color:#888; |
212 | } |
213 | #pullDown .pullDownIcon, #pullUp .pullUpIcon { |
214 | display:block; float:left; |
215 | width:40px; height:40px; |
216 | background:url(http://statics.webkfa.com/img/pull-icon@2x.png) 0 0 no-repeat; |
217 | -webkit-background-size:40px 80px; background-size:40px 80px; |
218 | -webkit-transition-property:-webkit-transform; |
219 | -webkit-transition-duration:250ms; |
220 | } |
221 | #pullDown .pullDownIcon { |
222 | -webkit-transform:rotate(0deg) translateZ(0); |
223 | } |
224 | #pullUp .pullUpIcon { |
225 | -webkit-transform:rotate(-180deg) translateZ(0); |
226 | } |
227 |
228 | #pullDown.flip .pullDownIcon { |
229 | -webkit-transform:rotate(-180deg) translateZ(0); |
230 | } |
231 |
232 | #pullUp.flip .pullUpIcon { |
233 | -webkit-transform:rotate(0deg) translateZ(0); |
234 | } |
235 |
236 | #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { |
237 | background-position:0 100%; |
238 | -webkit-transform:rotate(0deg) translateZ(0); |
239 | -webkit-transition-duration:0ms; |
240 |
241 | -webkit-animation-name:loading; |
242 | -webkit-animation-duration:2s; |
243 | -webkit-animation-iteration-count:infinite; |
244 | -webkit-animation-timing-function:linear; |
245 | } |
246 |
247 | @-webkit-keyframes loading { |
248 | from { -webkit-transform:rotate(0deg) translateZ(0); } |
249 | to { -webkit-transform:rotate(360deg) translateZ(0); } |
250 | } |
251 |
252 | </ style > |
253 | </ head > |
254 | < body > |
255 |
256 | < div id = "header" >< a href = "http://cubiq.org/iscroll" >iScroll</ a ></ div > |
257 | < div id = "wrapper" > |
258 | < div id = "scroller" > |
259 | < div id = "pullDown" > |
260 | < span class = "pullDownIcon" ></ span >< span class = "pullDownLabel" >Pull down to refresh...</ span > |
261 | </ div > |
262 |
263 | < ul id = "thelist" > |
264 | < li >Pretty row 1</ li > |
265 | < li >Pretty row 2</ li > |
266 | < li >Pretty row 3</ li > |
267 | < li >Pretty row 4</ li > |
268 | < li >Pretty row 5</ li > |
269 | < li >Pretty row 6</ li > |
270 | < li >Pretty row 7</ li > |
271 | < li >Pretty row 8</ li > |
272 | < li >Pretty row 9</ li > |
273 | < li >Pretty row 10</ li > |
274 | < li >Pretty row 11</ li > |
275 | < li >Pretty row 12</ li > |
276 | < li >Pretty row 13</ li > |
277 | < li >Pretty row 14</ li > |
278 | < li >Pretty row 15</ li > |
279 | < li >Pretty row 16</ li > |
280 | < li >Pretty row 17</ li > |
281 | < li >Pretty row 18</ li > |
282 | < li >Pretty row 19</ li > |
283 | < li >Pretty row 20</ li > |
284 | < li >Pretty row 21</ li > |
285 | < li >Pretty row 22</ li > |
286 | < li >Pretty row 23</ li > |
287 | < li >Pretty row 24</ li > |
288 | < li >Pretty row 25</ li > |
289 | < li >Pretty row 26</ li > |
290 | < li >Pretty row 27</ li > |
291 | < li >Pretty row 28</ li > |
292 | < li >Pretty row 29</ li > |
293 | < li >Pretty row 30</ li > |
294 | < li >Pretty row 31</ li > |
295 | < li >Pretty row 32</ li > |
296 | < li >Pretty row 33</ li > |
297 | < li >Pretty row 34</ li > |
298 | < li >Pretty row 35</ li > |
299 | < li >Pretty row 36</ li > |
300 | < li >Pretty row 37</ li > |
301 | < li >Pretty row 38</ li > |
302 | < li >Pretty row 39</ li > |
303 | < li >Pretty row 40</ li > |
304 | </ ul > |
305 | < div id = "pullUp" > |
306 | < span class = "pullUpIcon" ></ span >< span class = "pullUpLabel" >Pull up to refresh...</ span > |
307 | </ div > |
308 | </ div > |
309 | </ div > |
310 | < div id = "footer" ></ div > |
311 |
312 | </ body > |
313 | </ html > |