下拉刷新（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>"); 
});