你的位置:首页 > Java教程

[Java教程]jQuery手机端上拉刷新下拉加载更多页面


基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <div id="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 (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {      document.querySelectorAll("#wrapper ul li")[i].colorfulBg();    }    refresher.init({      id: "wrapper",//<------------------------------------------------------------------------------------┐      pullDownAction: Refresh,      pullUpAction: Load    });    var generatedCount = 0;    function Refresh() {      setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!        var el, 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 (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {          document.querySelectorAll("#wrapper ul li")[i].colorfulBg();        }      }, 1000);    }    function Load() {      setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!        var el, 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 (var i = 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