jquery - 使用触发器时更改 jQuery Mobile 转换 ('click' )

Question

我需要一个导航菜单来反射(reflect)基于点击和滑动的页面更改。为了执行此操作，我必须在滑动时触发单击。问题是，当我这样做时，我不能再使用:

$.mobile.changePage(prevpage, { transition : 'realslide', reverse : true });

其中属性 reverse:true 是重要的部分。 “swipeleft”可以有常规转换，但“swiperight”需要反向转换，我无法在 HTML 中使用 data-transition="reverse" 执行此操作，因为它取决于滑动方向。

目前，这就是我的代码的样子(由用户 Jasper 提供)。我不确定可以在哪里连接反向转换。

$(function(){
    var $nav   = $('#nav').children().children(),
        totNav = $nav.length;

    $(document).on('swipeleft', '.ui-page', function() {

        var next = ($nav.filter('.active').index() + 1);

        if (next === totNav)
            return;

        $nav.eq(next).children().trigger('click');

    }).on('swiperight', '.ui-page', function() {

        var prev = ($nav.filter('.active').index() - 1);

        if (prev === -1)
            return;

        $nav.eq(prev).children().trigger('click');

    }).on('click', '#nav a', function(e) {
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});

这个问题是这个问题的延伸:Update menu in jQuery Mobile based on swipe event

编辑:感谢大家的帮助!这是我的最终解决方案:

    <script>
    $(function(){

        var $nav    = $('#nav').children().children(),
            totNav  = $nav.length;

        $(document).on('swipeleft', '.ui-page', function() {

            var next = ($nav.filter('.active').index() + 1);
            var $elem = $nav.eq(next).children();

            if (next === totNav)
                return;

            $.mobile.changePage.defaults.reverse = false;

            $elem.trigger('click');

        }).on('swiperight', '.ui-page', function() {

            var prev = ($nav.filter('.active').index() - 1);
            var $elem = $nav.eq(prev).children();

            if (prev === -1)
                return;

            $.mobile.changePage.defaults.reverse = true;

            $elem.trigger('click');

        }).on('click', '#nav a', function(e) {

            var prev = $nav.filter('.active').index();

            $(this).parent().addClass("active").siblings().removeClass("active");

            var now = $nav.filter('.active').index();

            if (prev > now)
                $.mobile.changePage.defaults.reverse = true;
            else
                $.mobile.changePage.defaults.reverse = false;

        });

    });
    </script>

Answer 1

好吧，这个解决方案可能有点黑客，但它确实有效。

在触发事件之前，您可以将默认页面转换设置为反向，然后在触发后将其设置为默认值。我没有尝试过，但我认为可能会这样实现:

$(function(){
    var $nav   = $('#nav').children().children(),
        totNav = $nav.length;

    $(document).on('swipeleft', '.ui-page', function() {

        var next = ($nav.filter('.active').index() + 1);
    $.mobile.changePage.defaults.reverse = true; // Reverse transition
        $nav.eq(next).children().trigger('click');
    $.mobile.changePage.defaults.reverse = false; // Dont reverse


    }).on('swiperight', '.ui-page', function() {

        var prev = ($nav.filter('.active').index() - 1);
        $nav.eq(prev).children().trigger('click');

    }).on('click', '#nav a', function(e) {
        $(this).parent().addClass("active").siblings().removeClass("active");
    });
});