동적으로 jQuery Mobile 목록에 추가 목록을 추가하는 방법을 찾으십시오.

Question

아래로 스크롤 한 후 목록보기의 맨 아래에 목록을 추가 할 방법을 찾고 있습니다. 예를 들어, 처음에는 20 개의 항목이 반환됩니다. 페이지 매김을 사용하고 내 쿼리에서 돌아 오는만큼 많은 것을 반환 하겠지만 스크롤을 끝내면 자동으로이 목록에 더 추가하거나 "더보기"라고 말하는 버튼이 있습니다. . 나는 jQuery Mobile에 익숙하지 않으며 누군가 이런 종류의 구현을 본 적이 있는지 궁금해한다. 이것은 Phonegap에서도 사용되고 있습니다. 그렇다면 올바른 방향으로 나를 가리킬 수 있습니까? 미리 감사드립니다!

Answer 1

더 많은 목록 항목을 자동으로로드하는 대신 사용자가 더 많이로드 할 수있는 버튼을 배치하는 것이 좋습니다 (단, 그건 제 제안 사항입니다). http://jsfiddle.net/knuTW/

업데이트

그것은 단지 사용자가 다음,이 탭의 당시 때, 탭 용지를 더 행과 수있는 버튼로드 조금 쉽게 재 - APPEND : 여기

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

는 데모입니다 목록의 마지막 load-more 버튼 : http://jsfiddle.net/knuTW/2/

: 여기

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/