jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<divid="wrapper"><ul><li>row 10</li><li>row 9</li><li>row 8</li><li>row 7</li><li>row 6</li><li>row 5</li><li>row 4</li><li>row 3</li><li>row 2</li><li>row 1</li></ul></div><script>for(vari=0; i<document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
refresher.init({
id:"wrapper",//<------------------------------------------------------------------------------------┐pullDownAction: Refresh,
pullUpAction: Load
});vargeneratedCount=0;functionRefresh() {
setTimeout(function() {//<-- Simulate network congestion, remove setTimeout fromPRoduction!varel, li, i;
el=document.querySelector("#wrapper ul");
el.innerHTML='';for(i=0; i<11; i++) {
li=document.createElement('li');
li.appendChild(document.createTextNode('async row'+(++generatedCount)));
el.insertBefore(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/for(vari=0; i<document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
},1000);
}functionLoad() {
setTimeout(function() {//<-- Simulate network congestion, remove setTimeout from production!varel, li, i;
el=document.querySelector("#wrapper ul");for(i=0; i<2; i++) {
li=document.createElement('li');
li.appendChild(document.createTextNode('async row'+(++generatedCount)));
el.appendChild(li, el.childNodes[0]);
}
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/for(vari=0; i<document.querySelectorAll("#wrapper ul li").length; i++) {
document.querySelectorAll("#wrapper ul li")[i].colorfulBg();
}
},1000);
}</script>
via：http://www.w2bc.com/article/55236