jQueryMobile页面过渡未按预期加载页面 [英] jQueryMobile page transition not loading page as it should

问题描述

我正在尝试在单击链接时加载具有过渡效果的页面.我使用了 jQuery Mobile . 下面是我的代码.

I am trying to load a page with transition effect on click of a link. I have used jQuery Mobile. Below is my code.

<a href="index.html" data-transition="slide">Transition</a>

在点击 Transition 链接时，应该会加载 index.html 页面，显示过渡效果.

On click of Transition link index.html page should be loaded showing transition effect.

下面是我要加载的 index.html 的输出.

Below is the output of index.html that I am trying to load.

但是问题是，当我单击过渡链接时，索引页面未按预期加载.加载的页面如下所示.

But problem is that when I click Transition link the index page is not loaded as expected. The loaded page looks like below.

当我浏览Firebug时，发现发生了什么，而不是加载整个页面，而是将链接页面(即index.html)的输出放到第一页并将第一页的CSS应用于该过渡.

When I looked through firebug what is happening, I found that instead of loading complete page what transition is doing that it is putting output of linked page( i.e index.html) into first page and applying css of first page to it.

我希望过渡到正确加载索引页面的所有CSS，而不是将其嵌入到从中调用的页面链接中.

I want transition to load index page properly with its all css not to embed it into the page link is called from.

能否请您告诉我如何实现这一目标.

Can you please tell me how to achieve this.

推荐答案

默认情况下，在JQM中，当您链接到另一个页面时，JQM查找第一个JQM页面()上没有该页面上的任何脚本或样式，然后通过 ajax 将其拉出并增强 并将其附加到当前页面的DOM上.如果要完全加载第二页，则需要将ajax-enabled设置为false(这是全局设置)，或者在第二页的链接上添加属性 data-rel ="extrenal" .

In JQM by default when you link to another page JQM looks for the first JQM page (without any of the scripts or styles on that page)on that page (data-role="page") and then via ajax pulls it and enhances it and attaches it to the DOM of the current page. If you want to fully load the second page instead then you need to either set ajax-enabled to false (this is a global setting) or on the link to the second page add the attribute data-rel="extrenal".

这篇关于jQueryMobile页面过渡未按预期加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！