PhoneGap/jQuery Mobile: 多页面导航跳转
在WEB程序中,经常会通过#来在同一页面中滚动定位元素,如下:
<a href="#bar">scroll to bar</a>
你可能想在PhoneGap/jQM应用程序中实现相同的效果, 但默认html的行为在jQM中是不工作的,
你需要在一个html文件中定义多个内部页面(page元素)才行.
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Foo</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p>I'm second in the source order so I'm shown when you navigate me.</p>
<p><a href="#foo">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
1) 但如果你的首页是一个列表视图,其中每一行链接到一个新的html文件, 然后你想在这个新加载的页面中实现多页跳转的效果,这就不行了.
因为链接在jQM中是被自动处理为ajax请求的,而jQM通过#(hash)来跟踪管理ajax页面访问历史的(框架实际利用了浏览器的本地历史记录功能),这将导致hash冲突.
你需要通过在首页链接中加入rel="external"以重新加载(full reload)一个新的页面来清除URL中的ajax hash.
2) 另外如果你想直接在首页链接中定位到子链接中的某个页面,比如
<a href="details.html#foo">
这个也不能正常工作, 因为jQM目前并不能支持这样的深度链接(deep link)下的内部多页跳转.
最简单的解决方法就是把要跳转的页面都放在index.html中.
注意: 想在跳转页面执行的js脚本，需要放在body中。
by iefreer