Swiping between html pages for Android app dev

Question

I know this has been asked before but I can\'t get any of he examples to work. Getting the slide transition to work where you have all the pages as separate html files seems ver

Answer 1

The code in your OP works well in Multi-Page Model environment, since all pages (div's) are present in DOM. For Single Page Model, you will need to tweak the code a bit as each page is an individual file. Another note, .live() is deprecated, use .on() instead.

The simplest solution is to add custom attributes to each page div, e.g.

Retrieve the values of the custom attributes on swipe and then load the target page.

$(document).on("swipeleft swiperight", function (event) {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
        nextPage = activePage.data("next-page"),
        prevPage = activePage.data("prev-page");

    /* move to next page */
    if (event.type == "swipeleft" && nextPage) {
        $.mobile.pageContainer.pagecontainer("change", nextPage + ".html");
    }

    /* move to previous page */
    if (event.type == "swiperight" && prevPage) {
        $.mobile.pageContainer.pagecontainer("change", prevPage + ".html", {
            reverse: true
        });
    }
});