Vous cherchez un moyen d’append dynamicment plus de listes au bas de la liste de contrôle jQuery Mobile

Je cherche un moyen d’append plus de listes au bas de ma liste après avoir fait défiler la liste. Par exemple, j’ai un retour de 20 articles au départ. J’allais utiliser une pagination et en renvoyer autant que je revenais de ma requête, MAIS je préférerais retourner 15-20 à la fin du défilement, soit append automatiquement plus à cette liste ou avoir un bouton disant “afficher plus” . Je suis nouveau chez jQuery Mobile et je me demande si quelqu’un a déjà vu ce genre de chose implémenté. Ceci est également utilisé dans Phonegap. Si oui pouvez-vous me diriger dans la bonne direction? Merci beaucoup d’avance!

Au lieu de charger automatiquement plus d’éléments de liste, je suggère de placer un bouton que les utilisateurs peuvent appuyer pour en charger plus (mais c’est juste ma suggestion).

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

Voici une démo: http://jsfiddle.net/knuTW/

Mettre à jour

Il est un peu plus facile de simplement charger un bouton sur lequel l’utilisateur peut appuyer, puis lorsque vous appuyez dessus, chargez plus de lignes, puis rajoutez le bouton load-more à la fin de la liste:

 var $loadMore = $('ul').children('.load-more'); $loadMore.bind('click', function () { var out = []; for (var i = 0; i < 10; i++) { out.push('
  • ' + (count++) + '
  • '); } $('ul').append(out.join('')).append($loadMore).listview('refresh'); });​

    Voici une démo: http://jsfiddle.net/knuTW/2/

    Cet exemple pourrait aider:

    http://jsfiddle.net/dhavaln/nVLZA/

     // load test data initially for (i=0; i < 20; i++) { $("#list").append($("
  • " + i + "

    z

  • ")); } $("#list").listview('refresh'); // load new data when reached at bottom $('#footer').waypoint(function(a, b) { $("#list").append($("
  • " + i+++"

    z

  • ")); $("#list").listview('refresh'); $('#footer').waypoint({ offset: '100%' }); }, { offset: '100%' });​

    Il existe quelques articles décrivant les méthodes de “défilement éternel” et de “défilement infini”.

    L’idée est de charger de manière asynchrone plus de données lorsque l’utilisateur fait défiler l’écran vers le bas pour un nombre prédéterminé d’éléments.

    Il existe cependant un problème connu avec cette méthode, dans la mesure où elle fait de la barre de défilement un menteur.

    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- démos /