2

JQM 链接的大多数示例站点（如下所示）都使用通用导航系统，我将使用此站点作为示例：

http://www.takemefishing.org/mobile/

当链接到另一个不在 DOM 中的页面时，他们使用 ajax 导航，例如，在主页上，他们链接到带有 href 的“Fish Species”

#/mobile/fish-species.

单击时，这实际上通过 ajax 将页面加载到 DOM 中，/mobile/fish-species其中仅包含<div data-role="page" id="fish-species">... content here ...</div>

然后地址栏更新为/mobile/#/mobile/fish-species.

如果你直接去/mobile/#/mobile/fish-species（例如通过使用刷新按钮或直接链接），它会加载带有所有 CSS、JS 等的主页，然后通过 ajax/mobile/fish-species无缝加载到 DOM 中。

这种结构/系统似乎是 JQM 网站上使用的常用方法，例如Walt Disney和Standford University。

我的问题是他们是如何让这种魔法发生的？我怀疑 JQM 几乎完成了所有的工作，只是缺少一些配置选项或标志。

这是我尝试过的

我有一个基本的 JQM 主页/mobile/index.html，其中包含 CSS DOCTPYE、<head>JS 等部分，以及指向另一个页面的链接page2.html：

<li><a href="#/mobile/page2.html">Page 2</a></li>

第 2 页类似于“鱼类”页面，其中仅包含：

<div data-role="page" id="page2.html">... content here ...</div>

现在，当我单击主页上的链接时，page2.html 会通过 ajax 加载到 DOM 中并显示出来。问题是地址栏显示：

/mobile/page2.html

如果我然后单击浏览器刷新按钮，或直接导航到/mobile/page2.html，当然浏览器只会加载page2.html仅包含页面且不包含<div>head 部分或 CSS/JS 的内容。

我缺少什么让链接#/mobile/page2.html在加载时显示在地址栏中，然后如果刷新我想加载主页然后通过 ajax 拉 page2，就像示例网站一样？

我正在使用最新的 JQMhttp://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

4

1 回答 1

0

Jquery Mobile 会将导航到地址解释#address为导航到page命名的address

这意味着您可以在单个index.html两个页面中定义，例如

<div data-role="page" id="index.html"><a href="#page2.html">link to JQM page2</a></div>
<div data-role="page" id="page2.html">... content here ...</div>

单击第一页中的链接将加载第二页的内容，并相应地更新浏览器地址栏中显示的位置。这是标准的 JQM 方法，例如在您链接到的斯坦福网站中使用。Disney 和 Fish 网站看起来他们的做法略有不同，因为它们显然是通过绑定到pagechange事件、分析目标地址并采取相应措施来动态生成目标页面。您可以在jquery mobile docs中查看有关动态生成页面的更多详细信息。

于 2012-10-29T14:17:52.013 回答