php - 下拉刷新 (Div)

Question

问题

当你下拉时，我怎么能让它在哪里<div id="content">，它会执行一个功能并在屏幕顶​​部显示一个 div，上面写着“下拉刷新”？

我知道 iScroll 会这样做，但它不适用于我正在尝试做的事情。它仅适用于 UL。

这是我的 HTML

<div id="pullDown"> 
    <span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
    </span>
</div>
<div id="content">
    (There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>

Answer 1

<script>
  $(function() {
    var refreshCallback = function(loader) {
      setTimeout(function(){
        //loader.finish();

      }, 1000);
    };

    var cancelRefreshing = function() {
    };

    $("#draggable").pulltorefresh({
      async: true,
      // event triggered when refreshing start
      refresh: function(event, finishCallback) {
        element = $(this)
        setTimeout(function(){
          alert("refresh");

          // you must call this function if refreshing process runs asynchronusly
          finishCallback();
        }, 1000);
      },
      abort: function() {
        alert("abort");
      }
    });
  });
  </script>

完整演示点击这里

Answer 2

您可以提供 iScroll 插件。

iScroll 4： http ://cubiq.org/iscroll-4

Github 页面： https ://github.com/cubiq/iscroll

演示： http ://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

Answer 3

尝试这个

$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );

在函数内部，你可以调用 ajax 来加载内容

$("#content").load("<something.php>");

总的来说

$( "#pullDown" ).on( "dragstart", function() {
    $("#content").load("<something.php>");
} );