demos - jquery mobile 1.3 2

Buscando una manera de agregar dinámicamente más listas al pie de la lista de jQuery Mobile

Question

Estoy buscando una manera de agregar más listas al final de mi lista de lista luego de desplazarme hacia abajo. Por ejemplo, tengo una devolución de 20 artículos inicialmente. Iba a usar una paginación y solo devolvía tantas como volviera de mi consulta, PERO prefiero devolver 15-20 y luego, al final del desplazamiento, agrego automáticamente más a esta lista o tengo un botón que dice "ver más" . Soy nuevo con jQuery Mobile y me pregunto si alguien ha visto implementar este tipo de cosas. Esto también se está utilizando en Phonegap. Si es así, ¿puedes señalarme en la dirección correcta? Muchas gracias de antemano!

Answer 1

En lugar de cargar automáticamente más elementos de la lista, sugiero colocar un botón que los usuarios puedan tocar para cargar más (pero esa es solo mi sugerencia).

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

Aquí hay una demostración: http://jsfiddle.net/knuTW/

Actualizar

Es un poco más fácil simplemente cargar un botón que el usuario puede tocar, luego cuando se toca, cargar más filas y luego volver a agregar el botón load-more al final de la lista:

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

Aquí hay una demostración: http://jsfiddle.net/knuTW/2/

Answer 2

Este es un ejemplo que podría ayudar:

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

// load test data initially
for (i=0; i < 20; i++) {
    $("#list").append($("<li><a href=/"index.html/"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview(''refresh'');


// load new data when reached at bottom
$(''#footer'').waypoint(function(a, b) {
    $("#list").append($("<li><a href=/"index.html/"><h3>" + i+++"</h3><p>z</p></a></li>"));
    $("#list").listview(''refresh'');
    $(''#footer'').waypoint({
        offset: ''100%''
    });
}, {
    offset: ''100%''
});​

Answer 3

Hay algunos artículos que describen métodos para "scroll" e "scroll infinito", que es lo que parece que estás preguntando.

La idea detrás de ellos es cargar de manera asíncrona más datos cuando el usuario se desplaza hacia abajo a un número predeterminado de elementos desde la parte inferior.

Sin embargo, hay un problema conocido con ese método, ya que hace que un mentiroso salga de la barra de desplazamiento.

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- población/