jquery-mobile - 如何使用 jQuery 函数制作 jQuery Mobile 页面幻灯片？

Question

jQuery 函数（独立工作）：

$("#firstpage").live('pageinit', function (evt) {
    $("#firstpage").bind("swipeleft", function (e) {
        alert ("you swiped left!");
    });
});

jQuery 移动链接（也可以单独使用）：

<a href="#secondpage" data-transition="slide">GO TO PAGE 2</a>

那么如何将两者结合起来呢？谢谢！

Answer 1

您可以使用$.mobile.changePage()，它是内部用于在页面之间转换的内容。这是一个例子：

$(document).delegate("#firstpage", 'pageinit', function (evt) {
    $(this).bind("swipeleft", function (e) {
        $.mobile.changePage("#secondpage", {
            transition : 'slide'
        });
    });
}).delegate("#secondpage", 'pageinit', function (evt) {
    $(this).bind("swiperight", function (e) {
        $.mobile.changePage("#firstpage", {
            transition : 'slide',
            reverse    : true
        });
    });
});​

这是一个演示：http: //jsfiddle.net/QjUMh/

查看文档$.mobile.changePage并查看它具有的所有选项：http: //jquerymobile.com/demos/1.1.1/docs/api/methods.html

Answer 2

您可以使用$.mobile.changePage()方法来做到这一点。

检查 Jquery 移动文档
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

$("#firstpage").live('pageinit', function (evt) {
    $("#firstpage").bind("swipeleft", function (e) {
       $.mobile.changePage("#secondpage", { transition : 'slide'});
    });
});