0

我正在尝试开发一个基于 Phonegap 和 JQuery Mobile 框架的应用程序。

我创建了一个页面和子页面作为单独的 HTML 文件。

index.html 文件的正文部分如下所示：

<div data-role="page" id="p1" **data-theme="e"**>
<div data-role="header">App Name</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"  data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="page2.html#p2" rel="external">Link1</a></li>
<li><a href="page3.html#p3" rel="external">Link2</a></li>
</ul></div></div>

page2.html 文件的正文部分如下所示：

<div data-role="subpage" id="p2" **data-theme="e"**>
<div data-role="header">Places</div>
<div data-role="content" class="fit-content"><br/>
<ul data-role="listview" data-inset="true" data-filter="true"  data-icon="star" data-iconpos="right" data-transition="slide">
<li><a href="index.html#p1" rel="external">Go Back</a></li>
</ul></div></div>

data-theme="e" 已成功应用于 index.html，但未应用于 page2.html。有人可以为我提供这种行为的原因..吗？

我正在使用 JQuery 1.8.3 和 JQuery Mobile 1.2.1 版本，并且我在两个 HTML 文件（例如：/android_asset/www/css /jquery.mobile-1.2.1 . css，例如：/android_asset/www/js /jquery-1.8.3.js/)

  • 另外，我脑海中挥之不去的另一个问题是，当我将 page2.html 的正文内容作为子页面保存在与 index.html 相同的 HTML 文件中时，我无法调用 Link1 的 CLICK 事件；单击 Link1 后，即使我给出href="#p2"而不是 href-"page2.html#p2" ，我也不会被重定向到 Page2.html 。
4

1 回答 1

1

在 index.html 的列表分隔符中提供data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。根据此链接，

“提供data-ajax="false"很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史记录，而多个内部页面使用哈希来指示内部页面，因此会有冲突。”

此外，将 data-role="subpage" 重命名为 data-role="page"。这是这个问题的解决方案。

于 2013-09-05T09:53:32.317 回答