jQuery Mobileのリストにリストを動的に追加する方法をお探しですか？

Question

スクロールダウンした後、リストビューの下部にリストを追加する方法を探しています。例えば、私は最初に20のアイテムの戻り値を持っています。私はページネーションを使用して、クエリから戻ってきた数だけ戻ってきましたが、スクロールの最後に、15-20に戻って自動的にこのリストに追加したり、「もっと見る」というボタンがあります。私はjQuery Mobileの新機能で、誰かがこのようなことを実装しているのかどうか疑問に思っています。これはPhonegapでも使用されています。もしそうなら、正しい方向に私を向けることができますか？事前に感謝します！

Answer 1

リストアイテムを自動的に読み込むのではなく、ユーザーがタップしてもっと読み込めるようにすることをおすすめします（それは私の提案です）。ここで

//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired 
var timer = setInterval(function() { 
     scrollOK = true; 
    }, 100),//run this every tenth of a second 
    scrollOK = true;//setup flag to check if it's OK to run the event handler 
$(window).bind('scroll', function() { 

    //check if it's OK to run code 
    if (scrollOK) { 

     //set flag so the interval has to reset it to run this event handler again 
     scrollOK = false; 

     //check if the user has scrolled within 100px of the bottom of the page 
     if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) { 
      //now load more list-items because the user is within 100px of the bottom of the page 
     } 
    } 
}); 

はデモです：http://jsfiddle.net/knuTW/

更新

それはちょうどそれがタップだとき、ユーザは、その後、タップすることができますボタンをロードするために少し簡単だし、負荷より多くの行と再APPENDリストの最後にload-moreボタン：http://jsfiddle.net/knuTW/2/

0123：ここ

var $loadMore = $('ul').children('.load-more'); 
$loadMore.bind('click', function() { 
    var out = []; 
    for (var i = 0; i < 10; i++) { 
     out.push('<li>' + (count++) + '</li>'); 
    } 
    $('ul').append(out.join('')).append($loadMore).listview('refresh'); 
});​ 

はデモです

Answer 2

これは助けるかもしれない例です。

http://jsfiddle.net/dhavaln/nVLZA/

// load test data initially 
for (i=0; i < 20; i++) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>")); 
} 
$("#list").listview('refresh'); 


// load new data when reached at bottom 
$('#footer').waypoint(function(a, b) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>")); 
    $("#list").listview('refresh'); 
    $('#footer').waypoint({ 
     offset: '100%' 
    }); 
}, { 
    offset: '100%' 
});​ 

Answer 3

を「永遠にスクロールする」ための方法を記載するいくつかの記事やあなたがについて尋ねているように聞こえるものです「無限スクロール」があります。

ユーザーの背後にあるアイデアは、ユーザーが下から所定数の項目までスクロールダウンすると、非同期的に多くのデータをロードすることです。

スクロールバー自体から嘘つきを取り除くという点で、この方法には既知の問題があります。

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://masonry.desandro.com/demos/infinite-scroll.html
http://designbeep.com/2011/08/12/12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation/ http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/