jScroll을 구현하는 방법은 무엇입니까?

Question

임 초급 JS & jQuery 그래서 나와 함께하시기 바랍니다.

임 동적 인리스트 <ul>을 만들고 JS를 사용하여 마지막으로 작업하려고합니다. 이제 jScroll 플러그인을 사용하여 내 목록에 무한 스크롤링 개념을 구현해야합니다.

그래서 jScroll에 대해 많은 연구를했지만 필요한 튜토리얼을 찾을 수 없습니다. 튜토리얼의 대부분은 PHP 언어를 사용하고 있습니다. 제 경우에는이라는 간단한 쿼리를 사용하여 LIMIT 및 OFFSET이라는 쿼리를 사용하고 json을 반환하는 코드를 작성했습니다.

이, 는 이미 작업 데이터베이스에서 동적 목록을 만들 내 jQuery를/AJAX 코드 :

$.ajax({ 
    url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc 
    type: "GET", 
    error : function(jq, st, err) { 
     alert(st + " : " + err); 
    }, 
    success: function(result){ 
     //generate search result 
     //float:left untuk hack design 
     $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>' 
      + '<br/>' 
      + '<p>Found ' + result.length + ' results</p>'); 

     if(result.length == 0) 
     { 
      //temp 
      alert("not found"); 
     } 
     else{ 
      for(var i = 0; i < result.length; i++) 
      { 
       //generate <li> 
       $('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>'); 
      } 

      var i=0; 
      $(".box").each(function(){ 
       var name, address, picture = ""; 
       if(i < result.length) 
       { 
        name = result[i].name; 
        address = result[i].address; 
        picture = result[i].boxpicture; 
       } 

       $(this).find(".name").html(name); 
       $(this).find(".address").html(address); 
       $(this).find(".picture").attr("src", picture); 
       i++; 
      }); 
     } 
    } 
}); 

내 동적 목록이 이미 작동하고 있기 때문에, 지금은 단지 jScroll를 구현해야합니다.

$('.infinite-scroll').jscroll({ 
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', 
    padding: 20, 
    nextSelector: 'a.jscroll-next:last', 
    contentSelector: 'li' 
}); 

어떻게 내 경우에는이를 구현하는 그러나, 내가 좋아하는, 그 코드를 이해 해달라고? 나는 단지 <li>을 나의 jquery/AJAX에 덧붙여 어떻게 nextSelector을 만들었나요?

도움이 필요하시면 질문이 있으시면 질문 해주십시오. 당신의 도움에 대한

감사합니다 : 당신은 모든 일 prety 많은 단지 설정 적절한 시간에 jscroll 호출 할 필요를 하바

Answer 1

D. 아약스 성공

$.ajax({ 
     url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc 
     type: "GET", 
     error : function(jq, st, err) { 
      alert(st + " : " + err); 
     }, 
     success: function(result){ 
      //generate search result 
      //float:left untuk hack design 
      $('#search').append('<p style="float:left;">Search for : ' + keyword + '</p>' 
          + '<br/>' 
          + '<p>Found ' + result.length + ' results</p>'); 

      if(result.length == 0) 
      { 
       //temp 
       alert("not found"); 
      } 
      else{ 
       for(var i = 0; i < result.length; i++) 
       { 
        //generate <li> 
        $('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>'); 
       } 
       //After generation of <li> put a next link 
       $('#list').append('<a href="#" class="jscroll-next">NEXT</a>'); 
       //call to jscroller to be triggered 
       jscroller(); 
       var i=0; 
       $(".box").each(function(){ 
        var name, address, picture = ""; 
        if(i < result.length) 
        { 
         name = result[i].name; 
         address = result[i].address; 
         picture = result[i].boxpicture; 
        } 

        $(this).find(".name").html(name); 
        $(this).find(".address").html(address); 
        $(this).find(".picture").attr("src", picture); 
        i++; 
       }); 
      } 
     } 
     }); 

//The function to be called when <li> are rendered. 
function jscroller(){ 
$('.infinite-scroll').jscroll({ 
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', 
    padding: 20, 
    nextSelector: 'a.jscroll-next:last', 
    contentSelector: 'li' 
}); 
}