下拉刷新（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> 

完全演示Click Here

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) {}); 

里面的函数u能有Ajax调用加载内容

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

是对整个

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