|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"> |
|
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> |
|
<meta
name="apple-mobile-web-app-capable"
content="yes"> |
|
<meta
name="apple-mobile-web-app-status-bar-style"
content="black"> |
|
<title>iScroll 例項:下拉重新整理,滾動翻頁</title> |
|
|
|
<link
rel="stylesheet"
type="text/css"
href="scrollbar.css"> |
|
<script
type="application/javascript"
src="iscroll.js"></script> |
|
|
|
<script
type="text/javascript"> |
|
|
|
var myScroll, |
|
pullDownEl, pullDownOffset, |
|
pullUpEl, pullUpOffset, |
|
generatedCount = 0; |
|
|
|
/** |
|
* 下拉重新整理 (自定義實現此方法) |
|
* myScroll.refresh(); // 資料載入完成後,呼叫介面更新方法 |
|
*/ |
|
function pullDownAction () { |
|
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! |
|
var el, li, i; |
|
el = document.getElementById('thelist'); |
|
|
|
for (i=0; i<3; i++) { |
|
li = document.createElement('li'); |
|
li.innerText = 'Generated row ' + (++generatedCount); |
|
el.insertBefore(li, el.childNodes[0]); |
|
} |
|
|
|
myScroll.refresh(); //資料載入完成後,呼叫介面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion) |
|
}, 1000); // <-- Simulate network congestion, remove setTimeout from production! |
|
} |
|
|
|
/** |
|
* 滾動翻頁 (自定義實現此方法) |
|
* myScroll.refresh(); // 資料載入完成後,呼叫介面更新方法 |
|
*/ |
|
function pullUpAction () { |
|
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! |
|
var el, li, i; |
|
el = document.getElementById('thelist'); |
|
|
|
for (i=0; i<3; i++) { |
|
li = document.createElement('li'); |
|
li.innerText = 'Generated row ' + (++generatedCount); |
|
el.appendChild(li, el.childNodes[0]); |
|
} |
|
|
|
myScroll.refresh(); // 資料載入完成後,呼叫介面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion) |
|
}, 1000); // <-- Simulate network congestion, remove setTimeout from production! |
|
} |
|
|
|
/** |
|
* 初始化iScroll控制元件 |
|
*/ |
|
function loaded() { |
|
pullDownEl = document.getElementById('pullDown'); |
|
pullDownOffset = pullDownEl.offsetHeight; |
|
pullUpEl = document.getElementById('pullUp'); |
|
pullUpOffset = pullUpEl.offsetHeight; |
|
|
|
myScroll = new iScroll('wrapper', { |
|
scrollbarClass: 'myScrollbar', /* 重要樣式 */ |
|
useTransition: false, /* 此屬性不知用意,本人從true改為false */ |
|
topOffset: pullDownOffset, |
|
onRefresh: function () { |
|
if (pullDownEl.className.match('loading')) { |
|
pullDownEl.className = ''; |
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理...'; |
|
} else if (pullUpEl.className.match('loading')) { |
|
pullUpEl.className = ''; |
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉載入更多...'; |
|
} |
|
}, |
|
onScrollMove: function () { |
|
if (this.y > 5 && !pullDownEl.className.match('flip')) { |
|
pullDownEl.className = 'flip'; |
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆手開始更新...'; |
|
this.minScrollY = 0; |
|
} else if (this.y < 5 && pullDownEl.className.match('flip')) { |
|
pullDownEl.className = ''; |
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理...'; |
|
this.minScrollY = -pullDownOffset; |
|
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { |
|
pullUpEl.className = 'flip'; |
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆手開始更新...'; |
|
this.maxScrollY = this.maxScrollY; |
|
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { |
|
pullUpEl.className = ''; |
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉載入更多...'; |
|
this.maxScrollY = pullUpOffset; |
|
} |
|
}, |
|
onScrollEnd: function () { |
|
if (pullDownEl.className.match('flip')) { |
|
pullDownEl.className = 'loading'; |
|
pullDownEl.querySelector('.pullDownLabel').innerHTML = '載入中...'; |
|
pullDownAction(); // Execute custom function (ajax call?) |
|
} else if (pullUpEl.className.match('flip')) { |
|
pullUpEl.className = 'loading'; |
|
pullUpEl.querySelector('.pullUpLabel').innerHTML = '載入中...'; |
|
pullUpAction(); // Execute custom function (ajax call?) |
|
} |
|
} |
|
}); |
|
|
|
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800); |
|
} |
|
|
|
//初始化繫結iScroll控制元件 |
|
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); |
|
document.addEventListener('DOMContentLoaded', loaded, false); |
|
|
|
</script> |
|
|
|
<style
type="text/css"
media="all"> |
|
body,ul,li { |
|
padding:0; |
|
margin:0; |
|
border:0; |
|
} |
|
|
|
body { |
|
font-size:12px; |
|
-webkit-user-select:none; |
|
-webkit-text-size-adjust:none; |
|
font-family:helvetica; |
|
} |
|
|
|
#header { |
|
position:absolute; |
|
top:0; left:0; |
|
width:100%; |
|
height:45px; |
|
line-height:45px; |
|
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e)); |
|
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); |
|
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e); |
|
padding:0; |
|
color:#eee; |
|
font-size:20px; |
|
text-align:center; |
|
} |
|
|
|
#header a { |
|
color:#f3f3f3; |
|
text-decoration:none; |
|
font-weight:bold; |
|
text-shadow:0 -1px 0 rgba(0,0,0,0.5); |
|
} |
|
|
|
#footer { |
|
position:absolute; |
|
bottom:0; left:0; |
|
width:100%; |
|
height:48px; |
|
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); |
|
background-image:-moz-linear-gradient(top, #999, #666 2%, #222); |
|
background-image:-o-linear-gradient(top, #999, #666 2%, #222); |
|
padding:0; |
|
border-top:1px solid #444; |
|
} |
|
|
|
#wrapper { |
|
position:absolute; z-index:1; |
|
top:45px; bottom:48px; left:0; |
|
width:100%; |
|
background:#555; |
|
overflow:auto; |
|
} |
|
|
|
#scroller { |
|
position:relative; |
|
/* -webkit-touch-callout:none;*/ |
|
-webkit-tap-highlight-color:rgba(0,0,0,0); |
|
|
|
float:left; |
|
width:100%; |
|
padding:0; |
|
} |
|
|
|
#scroller ul { |
|
position:relative; |
|
list-style:none; |
|
padding:0; |
|
margin:0; |
|
width:100%; |
|
text-align:left; |
|
} |
|
|
|
#scroller li { |
|
padding:0 10px; |
|
height:40px; |
|
line-height:40px; |
|
border-bottom:1px solid #ccc; |
|
border-top:1px solid #fff; |
|
background-color:#fafafa; |
|
font-size:14px; |
|
} |
|
|
|
#scroller li > a { |
|
display:block; |
|
} |
|
|
|
/** |
|
* |
|
* 下拉樣式 Pull down styles |
|
* |
|
*/ |
|
#pullDown, #pullUp { |
|
background:#fff; |
|
height:40px; |
|
line-height:40px; |
|
padding:5px 10px; |
|
border-bottom:1px solid #ccc; |
|
font-weight:bold; |
|
font-size:14px; |
|
color:#888; |
|
} |
|
#pullDown .pullDownIcon, #pullUp .pullUpIcon { |
|
display:block; float:left; |
|
width:40px; height:40px; |
|
background:url(pull-icon@2x.png) 0 0 no-repeat; |
|
-webkit-background-size:40px 80px; background-size:40px 80px; |
|
-webkit-transition-property:-webkit-transform; |
|
-webkit-transition-duration:250ms; |
|
} |
|
#pullDown .pullDownIcon { |
|
-webkit-transform:rotate(0deg) translateZ(0); |
|
} |
|
#pullUp .pullUpIcon { |
|
-webkit-transform:rotate(-180deg) translateZ(0); |
|
} |
|
|
|
#pullDown.flip .pullDownIcon { |
|
-webkit-transform:rotate(-180deg) translateZ(0); |
|
} |
|
|
|
#pullUp.flip .pullUpIcon { |
|
-webkit-transform:rotate(0deg) translateZ(0); |
|
} |
|
|
|
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { |
|
background-position:0 100%; |
|
-webkit-transform:rotate(0deg) translateZ(0); |
|
-webkit-transition-duration:0ms; |
|
|
|
-webkit-animation-name:loading; |
|
-webkit-animation-duration:2s; |
|
-webkit-animation-iteration-count:infinite; |
|
-webkit-animation-timing-function:linear; |
|
} |
|
|
|
@-webkit-keyframes loading { |
|
from { -webkit-transform:rotate(0deg) translateZ(0); } |
|
to { -webkit-transform:rotate(360deg) translateZ(0); } |
|
} |
|
|
|
</style> |
|
|
|
|
|
</head> |
|
<body> |
|
<div
id="header"> |
|
<a
href="../db.html#page2">iScroll例項:下拉重新整理,滾動翻頁</a> |
|
</div> |
|
<div
id="wrapper"> |
|
<div
id="scroller"> |
|
<div
id="pullDown"> |
|
<span
class="pullDownIcon"></span><span
class="pullDownLabel">下拉重新整理...</span> |
|
</div> |
|
|
|
<ul
id="thelist"> |
|
<li>Pretty row 1</li> |
|
<li
id="aaa">Pretty row 2</li> |
|
<li>Pretty row 3</li> |
|
<li>Pretty row 4</li> |
|
<li>Pretty row 5</li> |
|
<li>Pretty row 6</li> |
|
<li>Pretty row 7</li> |
|
<li>Pretty row 8</li> |
|
<li>Pretty row 9</li> |
|
<li>Pretty row 10</li> |
|
<li>Pretty row 11</li> |
|
<li>Pretty row 12</li> |
|
<li>Pretty row 13</li> |
|
<li>Pretty row 14</li> |
|
<li>Pretty row 15</li> |
|
<li>Pretty row 16</li> |
|
<li>Pretty row 17</li> |
|
<li>Pretty row 18</li> |
|
<li>Pretty row 19</li> |
|
<li>Pretty row 20</li> |
|
<li>Pretty row 21</li> |
|
<li>Pretty row 22</li> |
|
<li>Pretty row 23</li> |
|
<li>Pretty row 24</li> |
|
<li>Pretty row 25</li> |
|
<li>Pretty row 26</li> |
|
<li>Pretty row 27</li> |
|
<li>Pretty row 28</li> |
|
<li>Pretty row 29</li> |
|
<li>Pretty row 30</li> |
|
<li>Pretty row 31</li> |
|
<li>Pretty row 32</li> |
|
<li>Pretty row 33</li> |
|
<li>Pretty row 34</li> |
|
<li>Pretty row 35</li> |
|
<li>Pretty row 36</li> |
|
<li>Pretty row 37</li> |
|
<li>Pretty row 38</li> |
|
<li>Pretty row 39</li> |
|
<li>Pretty row 40</li> |
|
</ul> |
|
|
|
<div
id="pullUp"> |
|
<span
class="pullUpIcon"></span><span
class="pullUpLabel">上拉載入更多...</span> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
<div
id="footer"></div> |
|
|
|
</body> |
|
</html> |