Comment implémenter jScroll?

Je suis un débutant en JS & jQuery, donc s'il vous plaît garder avec moi.

Im essayant de créer une liste dynamique <ul> à l'aide de JS et enfin son travail. Maintenant, j'ai besoin de mettre en œuvre l'infini défilement concept dans ma liste, à l'aide jScroll plugin.

Donc j'ai fait des recherches beaucoup sur jScroll, mais je ne peux pas trouver de tutoriel dont j'avais besoin. La plupart des tutoriels à l'aide de PHP langue assez bien, alors que dans mon cas j'ai fait de mon serveur (PHP) code à l'aide de simples SELECT requête avec LIMIT et OFFSET sur et en les retournant une json.

C'est mon jQuery/AJAX code qui créer la liste dynamique de la base de données, son travail :

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

Parce que ma liste dynamique est déjà au travail, maintenant, j'ai juste besoin de mettre en œuvre la jScroll. Cependant, je ne comprends pas son code, comme :

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

Comment implémenter cela dans mon cas? Je viens d'ajouter <li> dans mon jQUery/AJAX-il alors de la nextSelector?

Toute aide est appréciée, s'il vous plaît demander si vous avez une question.

Merci pour votre aide 😀

source d'informationauteur Blaze Tama

  1. 7

    Vous hava chaque chose petite quantité juste nécessaire pour appeler jscroll au bon moment.

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