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.

<div data-role="page" data-next-page="services" data-prev-page="about">

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