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

document对象没有location属性，而window对象有。参考：document object

Answer 3

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

从本质上讲，浏览器在jQuery有机会拦截它并生成动画之前就被重定向了。

正如@Th0mdike所说，你可以从两个选项中得到完全相同的结果，并且考虑到你可以用$('a').attr('href', 'new.html')动态地改变锚的href属性，我看不出做后者有什么好处……