jquery - jQuery 移动页面过渡

Question

我在我的应用程序（HTML5 移动应用程序）中使用 jQuery 移动页面转换功能：

<a href="test.html" data-transition="slide">abc</a>

页面转换工作正常（幻灯片动画）：

<a onclick="document.location.href = 'test.html';" data-transition="slide">abc</a> 

页面转换不起作用，它只是导航它不滑动。

我希望页面转换与第二个选项一起使用。
请帮忙

Answer 1

原因是在第一种情况下，JQM 会更改页面。在第二种情况下，您通过更改位置来手动更改页面。使用 ajax 由 jquery 更改的页面获取页面转换。
要将过渡更改为幻灯片，您可以配置默认设置$.mobile.defaultPageTransition = "slide";。
使用$.mobile.changePage()功能来改变页面。changePage()功能将为您进行页面转换。

<!-- html -->
<a class="testLink" data-transition="slide">abc</a>

//js

$(document).off('pagechange');
$(document).on('pagechange', function (e, ui) {
    // generally written in pagechange event.
    $('.testLink').off();
    $('.testLink').on('click', function (e) {
        $.mobile.changePage('test.html', {
            changeHash: true,
            dataUrl: "test",    //the url fragment that will be displayed for the test.html page
            transition: "slide"  //if not specified used the default one or the one defined in the default settings
        });
    });
});

Answer 2

文档对象没有位置属性，而窗口对象有。参考： 文档对象

Answer 3

这可能是因为 jQuery MobilepreventDefault()在跟随链接时使用该方法来启用页面转换。由于您使用的是onclick，因此这不是元素的默认操作，而是click事件的绑定。

本质上，浏览器在 jQuery 有机会拦截它并制作动画之前被重定向......

正如@Th0mdike 所说，您可以从两个选项中得到完全相同的结果，并且鉴于您可以使用 动态更改href锚点的属性$('a').attr('href', 'new.html')，我认为后者没有任何好处......

Answer 4

添加属性

rel="external"

文档链接

这将允许加载外部页面