Auf der Suche nach einem Weg, um dynamisch hinzufügen, weitere Listen zu den unteren jQuery Mobile listview

Ich bin auf der Suche nach einem Weg, um mehr Listen auf der Unterseite der meine listview nach unten scrollen. Zum Beispiel habe ich eine Rendite von 20 items zunächst. Ich wollte mit einer Paginierung zurückzugeben und nur so viele, wie kommen zurück von meiner Abfrage, ABER ich möchte lieber zurück 15-20 dann am Ende zu Blättern, die entweder automatisch hinzufügen mehr zu dieser Liste oder eine Schaltfläche sagen "mehr anzeigen". Ich bin neu bei jQuery Mobile und Frage mich, ob jemand gesehen hat, diese Art der Sache umgesetzt. Dies ist auch in Phonegap. Wenn ja, können Sie zeigen mich in die richtige Richtung? Viel Dank im Voraus!

InformationsquelleAutor tjoenz | 2012-03-08
  1. 18

    Statt automatisch laden mehr Liste-Elemente, schlage ich vor, das platzieren einer Schaltfläche können Benutzer Tippen Sie auf " mehr laden (aber das ist nur mein Vorschlag).

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

    Hier ist eine demo: http://jsfiddle.net/knuTW/

    Update

    Ist es ein bisschen einfacher, laden Sie einfach eine Schaltfläche, kann der Benutzer Tippen Sie auf, dann, wenn es erschlossen ist, laden mehr Zeilen und dann re-hängen Sie den load-more - Taste, um das Ende der Liste:

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

    Hier ist eine demo: http://jsfiddle.net/knuTW/2/

    • Vielen Dank Jasper! Ich gebe dies mal. Ich dachte, dass ich ' ll hinzufügen einen Knopf, und immer noch kann.
    • Ich fügte hinzu, ein update auf meine Antwort zu zeigen, wie einfach es ist, dies zu tun mit einem Knopf anstatt automatisch.
    • Danke Jasper! Ich habe Probleme mit dem infinite-scroll-nicht arbeiten wollen. Kann sein, dass es ein mehrseitiges design, das ich habe, mit zu arbeiten. Aber ich werde versuchen, dieses mit dem button 🙂
    • Dies funktioniert gut, außer ich habe ein Problem mit meinem Fall, wo die "mehr Laden" - Taste ist die Multiplikation und nicht Anhängen am Ende. Ich kann fügen Sie den code hier ein, wenn Sie möchten
    • Sollten Sie eine andere Frage. Wenn Sie markieren Sie Sie mit jQuery-Mobile dann werde ich es sehen, sonst einen link zu posten es hier.
    • ok werde das tun. Danke!
    • Danke! Für jetzt ist es gut funktioniert!

    InformationsquelleAutor Jasper
  2. 3

    Ist dieses Beispiel mag helfen:

    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%'
});​
    • Ja, das ist genau das, was ich suchte...was haben Sie in diesem Beispiel. Ich lasse Sie wissen, wie es funktioniert 🙂
    • Können Sie erläutern, wie Sie auf den code in Ihre Geige? Vielleicht ein link zu dem plugin website?
    • Wegpunkt ist ein wirklich einfaches plugin, welches ein Ereignis auslöst, wenn Sie zu erreichen (nach unten scrollen), um das selector-element. check imakewebthings.com/jquery-waypoints und github.com/imakewebthings/jquery-waypoints für mehr Details
    InformationsquelleAutor dhaval
  3. 0

    Gibt es ein paar Artikel beschreibt Methoden für die "ewig scrollen" und "infinite scroll" - das ist das, was es klingt wie Sie Fragen.

    Die Idee dahinter ist das laden asynchron mehr Daten, wenn der Benutzer scrollt, um eine vorbestimmte Anzahl von Elementen aus dem Boden.

    Es ist ein bekanntes Problem mit dieser Methode allerdings, dass Sie einen Lügner aus der scroll-Leiste selbst.

    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-demos/

    • Ahh, danke @jefferyhamby. Ich lese über diese links. Ich denke, das wäre sehr schön zu haben, kann aber, wie erwähnt, nur noch mit einem "mehr anzeigen" - button am unteren Rand der Liste.
    InformationsquelleAutor jeffreyhamby
Schreibe einen Kommentar