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 object

Answer 3

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

基本上，浏览器在jQuery有机会拦截浏览器和动画之前被重定向......

正如@ Th0mdike所说，你从两个选项得到完全相同的结果，并且假设你可以用href动态更改锚点的$('a').attr('href', 'new.html')属性，我看不到任何做后者的好处......

Answer 4

添加属性

rel="external"

documentation link

这将允许加载外部页面

jQuery移动页面转换

4 个答案: