这个jQuery Mobile通用导航系统如何工作?

时间:2012-10-23 09:45:38

标签: javascript jquery jquery-mobile

JQM链接使用常见导航系统的大多数示例站点(如下所示),我将以此站点为例:

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

当链接到另一个尚未在DOM中的页面时,他们使用ajax导航,例如,在主页上,他们链接到'鱼种',其href为

#/mobile/fish-species

点击后,这实际上是通过来自/mobile/fish-species的jjax将页面加载到DOM中,其中只包含<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 DisneyStandford University

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


这是我试过的

我有一个基本的JQM主页/mobile/index.html,其中包含DOCTPYE<head>部分,包含CSS,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>而没有头部或CSS / JS包括在内。

我在加载时获取地址栏中显示#/mobile/page2.html的链接时缺少什么,然后如果刷新我想加载主页然后通过ajax拉取page2,就像示例网站一样?< / p>

我在http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

使用最新的JQM

1 个答案:

答案 0 :(得分:0)

Jquery Mobile会将导航解释为地址#address,以导航至名为page的{​​{1}}

这意味着您可以在单个address两个页面中定义,例如

index.html

单击第一页中的链接将加载第二页的内容并相应地更新浏览器地址栏中显示的位置。 这是标准的JQM方法,例如在您链接到的stanford网站中使用。 迪士尼和鱼网站看起来他们做的事情略有不同,因为他们显然通过绑定到<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> 事件动态生成目标页面,分析目标地址并采取相应行动。您可以在jquery mobile docs

中查看有关动态生成页面的更多详细信息