jScrollの実装方法は？

Question

私は初心者のJS & jQueryので私と一緒にご負担ください。

私は動的リストJSを使用して<ul>を作成しようとしています。今私は、jScrollプラグインを使用して、私のリストに無限のスクロールの概念を実装する必要があります。

私はjScrollについて多くのことを研究しましたが、私は必要なチュートリアルを見つけることができません。チュートリアルのほとんどはPHP言語を使用していますが、私の場合はというとOFFSETの単純なSELECTクエリを使用してサーバ（PHP）のコードを実行しました。

これは、そのはすでに作業データベースから動的リストを作成し、私の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はどうですか？

何か助けていただければ幸いです。ご質問がありましたらお聞かせください。あなたの助けのための

ありがとう：D

Answer 1

あなたはpretyくらいのちょうど適切な時間にjscroll呼び出すために必要な設定すべてのものをHAVA。 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>'); 
       } 
       //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' 
}); 
}