jQuery Mobile的页面过渡

Question

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

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

网页过渡工作正常（幻灯片动画）有：

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

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

我希望页面过渡与第二个选项一起工作。
请帮忙

Answer 1

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

Answer 2

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

本质上说，jQuery有机会拦截它和动画...

正如@ Th0mdike已经表示，虽然之前的浏览器被重定向，你这两个选项得到完全相同的结果，并考虑到你能够动态地改变锚点的href属性与$('a').attr('href', 'new.html')，我没有看到做后者的任何好处....

Answer 3

原因是，在第一种情况下，JQM做页面更改。在第二种情况下，您通过更改位置手动更改页面。 jQuery使用ajax更改的页面会获得页面转换。
要将切换转换为幻灯片，您可以配置默认设置$.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 4

添加属性

rel="external" 

documentation link

这将允许加载外部页面