2013-02-14 65 views
2

我从jQuery Mobile开始,我遇到了问题。我有两个HTML文档:在jQuery Mobile中混合单页和多页文档

  • page1.html
  • page2.html
    • page2a
    • page2b

的问题如下:

  • 当我从page1.html浏览到page2.html,它显示page2a,但我无法浏览到page2b
  • 当我从page1.html到page2a浏览,它停留在page1.html
  • 当我浏览
  • 从page2.html到page2a或page2b,它效果不错

我的解决方案有什么问题?有没有什么好的解决方案可以正常工作?

这里是参考代码:

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> 
+0

我忘了说,它添加在'工作相对=“外部”',但它防止了AJAX预加载(我真的很想有) – Ploppe 2013-02-14 10:39:48

回答

3

检查以下问题。它似乎只适用于data-rel="external"

JQM Multipage

UPDATE:

注意:您无法链接到与阿贾克斯导航积极的多页文档,因为该框架将只加载在第一页找到,而不是一整套内部网页。在这些情况下,您必须链接无Ajax(请参阅下一节)以进行整页刷新,以防止潜在的散列冲突。目前有一个subpage plugin可以加载多页文档。

来源:JQM - Linking pages

+0

我已经加入这一细节最初的帖子是:“我忘记说它在添加rel =”external“时起作用,但它阻止了AJAX预加载(我真的很想)”。它的工作原理,但它不是最好的解决方案 – Ploppe 2013-02-14 12:32:16

+0

检查我更新的答案。 – Omar 2013-02-14 14:09:14

+0

是的,谢谢,这就是要点。 rel =“external”会让iOS离开Webapp以打开Safari。我会尝试插件 – Ploppe 2013-02-14 14:22:11