Question

我正在制作一个3页的移动优化网站。我需要jQuery mobile提供的水平幻灯片导航。如果您在第1页上导航到第2页，则第2页从右侧滑入。

但是，从第1页开始，您还可以导航到第3页。如果您这样做，我不希望第3页以与第2页相同的方式滑入。相反，我需要第2页滑动并继续移动，然后第3页滑入。

这是我的javascript演示。单击第1页上的“地图”转到第2页。单击第1页上的“1”将超过第2页，并转到第3页。

http://smartpeopletalkfast.co.uk/pos/

我做了一个更复杂的演示来做到这一点，但我有很多交叉设备和其他意想不到的问题，所以我喜欢使用像jQuery mobile这样的框架，如果它可以做到这一点。谢谢

Answer 1

您可以点击链接点击并将用户发送到具有所需动画的正确伪页面：

$(function () {

    //create an associative array of objects to pas to the `changePage()` function for a specific transition
    var convert = {

            //from page1
            page1 : {

                //to page2
                page2 : { transition : 'slide'},

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page2
            page2 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page3
                page3 : { transition : 'slide'}
            },

            //from page3
            page3 : {

                //to page1
                page1 : { transition : 'slide', direction : 'reverse' },

                //to page2
                page2 : { transition : 'slide', direction : 'reverse' }
            }
        };
    $('.my-links').bind('click', function () {

        //change to the specified page
        $.mobile.changePage($(this).attr('href'), convert[$.mobile.activePage[0].id][$(this).attr('href').replace('#', '')]);
        return false;
    });
});

这绑定到.my-links类的任何元素。此外，page / page2 / page3是三个页面的ID。

使用jQuery mobile在页面上导航？

1 个答案: