我从jQuery手机开始,我遇到了一个问题。我有两个HTML文档:
问题如下:
我的解决方案有什么问题?有什么好的解决办法让它正常工作吗?
以下是供参考的代码:
Page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Single page</h1>
</div>
<div data-role="content">
<p>See <a href="page2.html">page 2</a>.</p>
<!-- <p>See <a href="page2.html#a">page 2a</a>.</p> -->
</div>
</div>
</body>
</html>Page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #a -->
<div data-role="page" id="a">
<div data-role="header">
<h1>Page 2a</h1>
</div>
<div data-role="content" >
<p><a href="#b" data-role="button" data-transition="slide">Show page "2b"</a></p>
</div>
</div>
<!-- Start of second page: #b -->
<div data-role="page" id="b">
<div data-role="header">
<h1>Page 2b</h1>
</div>
<div data-role="content">
<p><a href="#a" data-direction="reverse" data-transition="slide" data-role="button">Back to page "2a"</a></p>
</div>
</div><!-- /page b -->
</body>
</html>发布于 2013-02-14 11:02:52
检查下面的问题。它似乎只适用于data-rel="external"。
更新:
注意:您不能链接到具有Ajax导航活动的多页文档,因为框架只加载它找到的第一个页面,而不是完整的内部页面集。在这些情况下,您必须在没有Ajax的情况下链接(请参阅下一节)以进行完整的页面刷新,以避免潜在的哈希冲突。目前有一个https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget可以在多页文档中加载。
来源:JQM链接页
https://stackoverflow.com/questions/14872857
复制相似问题