Question

更新：根据Omar / user2232273的建议添加了工作代码。

我正在制作jQuery移动网站的桌面版本，我正在添加导航箭头以触发向左/向右滑动功能。我在使用Javascript收集正确的属性时遇到了一些麻烦。

以下是滑动左/右功能的工作javascript：

$(document).on("pageinit", "[data-role='page']", function () {
    var page = "#" + $(this).attr("id");

    $(document).on("swipeleft", page, function () {
        next = $(this).jqmData("next");
        console.log(next);
        if (next) {
            $.mobile.changePage("#" + next, { transition: "slide" });
        }
    });

    $(document).on("swiperight", page, function () {
        prev = $(this).jqmData("prev");
        if (prev) {
            $.mobile.changePage("#" + prev, { transition: "slide", reverse: true });
        }
    });

});

以下是使用工作解决方案的更新代码：

$(document).on('click', '.right', function (event) {
    event.stopImmediatePropagation();
    if ($.mobile.activePage.next('[data-role=page]').length !== 0) {
        var next = $.mobile.activePage.next('[data-role=page]')[0].id;
        $.mobile.changePage("#" + next, {
            transition: 'slide'
        });
    }
});

$(document).on('click', '.left', function (event) {
    event.stopImmediatePropagation();
    if ($.mobile.activePage.next('[data-role=page]').length !== 0) {
        var prev = $.mobile.activePage.prev('[data-role=page]')[0].id;
        $.mobile.changePage("#" + prev, {
            transition: 'slide',
            reverse: true
        });
    }
});

以下是页面代码的示例：

<div data-role="page" id="page1" data-next="page2">
    <div class="slide" data-role="content">
        <div id="navigation">
            <div class="left"></div>
            <div class="right"></div>
        </div>
            <div class="content">
            LOREM IPSUM
            </div>
        </div>
    </div>
</div>

Answer 1

试试这个..

<强>脚本：

$(document).on('click', '#goforward', function () {
 var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id;
 $.mobile.changePage(next, {
    transition: 'slide'
 });
});

// Previous page
$(document).on('click', '#goback', function () {
 var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id;
 $.mobile.changePage(prev, {
    transition: 'slide',
    reverse: true
 });
});

<强> HTML

<a href="#goback" data-icon="arrow-l" id="goback" class="ui-btn-left" data-inline="true" data-iconpos="notext" data-direction="reverse">Back</a>
<a href="#goforward" data-icon="arrow-r" id="goforward" class="ui-btn-left" data-inline="true" data-iconpos="notext" data-direction="reverse">Next</a>

<强>更新：

查看我的 DEMO ：LINK HERE

添加按钮以在jQuery Mobile上向右/向左轻扫

1 个答案: