CODEWITHSUNDEEP
jquery-mobile
Jimbly2
Jimbly2

Reputation: 227

Swiping between html pages for Android app dev

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 very difficult to do? How does the next/prev part of the script know which of the other files is next?

For example, index.html should slide to 01_welcome.html - but how does it know that it's not 02_funds.html?

Thanks for any enlightenment you can give. Below is the script ( courtesy of a previous answer) I've been trying to implement.

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, "slide", false, true);
    }
});
$('div.ui-page').live("swiperight", function () {
    var prevpage = $(this).prev('div[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {
            transition: "slide",
            reverse: true
        }, true, true);
    }
});

Upvotes: 0

Views: 559

Answers (1)

Omar
Omar

Reputation: 31732

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

Upvotes: 2

Related Questions