Wie implementiert man jScroll?

Question

Ich bin ein Anfänger in JS & jQuery also bitte bitte mit mir.

Ich versuche, eine dynamische Liste <ul> mit JS zu erstellen und schließlich seine Arbeit. Jetzt muss ich das unendliche Scrolling-Konzept in meiner Liste implementieren, mit jScroll Plugin.

Also recherchierte ich viel über jScroll, aber ich kann kein Tutorial finden, das ich brauchte. Die meisten Tutorials mit PHP Sprache ziemlich viel, während in meinem Fall habe ich meinen Server (PHP) Code mit einfachen SELECT Abfrage mit LIMIT und OFFSET darauf getan und eine json zurück.

Dies ist meine jQuery/AJAX Code, der die dynamische Liste von Datenbank erstellen, seine bereits Arbeits:

$.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++; 
      }); 
     } 
    } 
}); 

Weil meine dynamische Liste bereits funktioniert, jetzt muss ich nur die jScroll implementieren. Allerdings verstehe ich nicht seinen Code, wie:

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

Wie dies in meinem Fall zu implementieren? Ich füge einfach <li> in meiner jQuery/AJAX an, also wie wäre es mit der ?

Jede Hilfe ist willkommen, bitte fragen Sie einfach, wenn Sie Fragen haben.

Danke für Ihre Hilfe: D

Answer 1

Sie alles, was hava prety viel setzen nur auf die richtige Zeit zu nennen jscroll benötigt.

$.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' 
}); 
}