如何使用 Phonegap + JQuery Mobile 启用动画页面转换？

Question

根据 JQuery Mobile 文档 ...

要启用动画页面转换，所有指向 外部页面（例如 products.html）将通过 Ajax 加载

如果可能的话，如何在构建所有页面都在本地而不是位于 Web 服务器上的 Phonegap 应用程序时启用页面转换？

Answer 1

如果 AJAX 是从本地文件或网页加载，则没有区别（除非网页需要将域列入白名单）。

默认情况下，iOS 的 Phonegap/Cordova 从 www/index.html 加载。

这是一个有 2 个页面的示例，其中包含用于转换的内联数据属性。

首页，page1.html

<!-- page1.html -->
...
<div id="page1" data-role="page">
    Local on same page<br/>
    <a href="#samePage" data-transition="pop">same page</a>

    Local in another page<br/>
    <a href="page2.html" data-transition="fade">new page</a>

</div>

<div id="samePage" data-role="page">
    Same Page
</div>
...

一个单独的文件page2.html。

<!-- page2.html -->
<div id="page2" data-role="page">
    Page 2
</div>