面临 jquerymobile 的多页面模板结构问题
我是phonegap的新手。我正在使用jquery mobile和html5来开发android应用程序。我的应用程序中有三个页面。第一个是index.html，它有内容列表。第二个页面有文本内容和一个带有两个的标题按钮，例如后退和下一页。第三页与第二页相同。现在我的问题是，当我单击index.html的第一个列表元素时，它将用户重定向到第二页。但是当我点击第二页的下一步按钮，它应该打开第三页，但没有任何反应。
这是index.html的：-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Beginning Android3</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" data-divider-theme="e">
<li data-role="list-divider">Part 1:-Core Concept</li>
<li><a href="chapter1.html">1:-The Big Picture</a> </li>
<li><a href="#">2:-How to Get Started</a></li>
<li><a href="#">3:-Your First Android Project</a></li>
<li><a href="#">4:-Examining Your First Project</a></li>
<li data-role="list-divider">Part 2:-Activities</li>
<li><a href="#">5:-Rewriting Your First Project</a></li>
<li><a href="#">6:-Using XML-Based Layouts</a></li>
<li><a href="#">7:-Employing Basic Widgets</a></li>
<li data-role="list-divider">Part 3:-Data Stores, Network Services, and APIs</li>
<li><a href="#">8:-Using Preferences</a></li>
<li><a href="#">9:-Managing and Accessing Local Databases</a></li>
<li><a href="#">10:-Communicating via the Internet</a></li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
这是第二页：-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="page1">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#page2" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
<p>Android is everywhere. Phones. Tablets.
TVs and set-top boxes powered by Google TV.Soon,
Android will be in cars and all sort of other places as well.
However, the general theme of Android devices will be smaller
screens and/or no hardware keyboard.
</p>
</div>
</div>
<div data-role="page" data-theme="b" id="page2">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
This is a sample about page.
</div>
</div>
</body>
</html>
我在第二页中使用多页技术。在第二页中，我有两个页面，id为page1和page2。我无法从标题上的 page1 的下一个按钮重定向 page2。请帮助我解决这些问题。提前谢谢。
I am new to phonegap.I am using jquery mobile with html5 for developing android app.I have three pages in my app.First is index.html,it has the list of contents.Second page have the text content and a header with two buttons e.g. back and next.And third page is the same as the second page.Now my problem is that when i click on the first list element of the index.html it redirects the user to the second page.But when i click on the next button of the second page,it should open up the third page but nothing happens.
Here is the for index.html:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header">
<h1>Beginning Android3</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true" data-divider-theme="e">
<li data-role="list-divider">Part 1:-Core Concept</li>
<li><a href="chapter1.html">1:-The Big Picture</a> </li>
<li><a href="#">2:-How to Get Started</a></li>
<li><a href="#">3:-Your First Android Project</a></li>
<li><a href="#">4:-Examining Your First Project</a></li>
<li data-role="list-divider">Part 2:-Activities</li>
<li><a href="#">5:-Rewriting Your First Project</a></li>
<li><a href="#">6:-Using XML-Based Layouts</a></li>
<li><a href="#">7:-Employing Basic Widgets</a></li>
<li data-role="list-divider">Part 3:-Data Stores, Network Services, and APIs</li>
<li><a href="#">8:-Using Preferences</a></li>
<li><a href="#">9:-Managing and Accessing Local Databases</a></li>
<li><a href="#">10:-Communicating via the Internet</a></li>
</ul>
</div><!-- /content -->
</div>
</body>
</html>
and here's the second page:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="page1">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#page2" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
<p>Android is everywhere. Phones. Tablets.
TVs and set-top boxes powered by Google TV.Soon,
Android will be in cars and all sort of other places as well.
However, the general theme of Android devices will be smaller
screens and/or no hardware keyboard.
</p>
</div>
</div>
<div data-role="page" data-theme="b" id="page2">
<div data-role="header">
<h1>The Big Picture</h1>
<a data-rel="back" data-role="button" data-icon="back" data-theme="a">Back</a>
<a href="#" data-role="button" data-icon="forward" data-theme="a">Next</a>
</div><!-- /header -->
<div data-role="content">
This is a sample about page.
</div>
</div>
</body>
</html>
i m using the multi page technique in second page.In second page I have two page with ids page1 and page2.I am not able to redirect the page2 from the page1's next button on header.Help me get rid of these problem.Thanx in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
如果您从单页链接到多页，则需要设置 data-ajax="false"：
If you link to a multi page from single page you'll need to set data-ajax="false":
感谢@ghm04 提供线索：
如果有人想知道为什么（至少我想知道），答案就在文档中：
http://jquerymobile.com/demos/1.0/docs /pages/page-links.html（“多页文档内的链接”）
Thanks @ghm04 for giving the clue:
If anybody wants to know why (at least, I do), the answer is in the doc :
http://jquerymobile.com/demos/1.0/docs/pages/page-links.html ("Linking within a multi-page document")
我之前遇到过同样的问题，最终使用了多页面解决方案。因为我需要后退按钮才能工作。一旦我开始使用单页（data-ajax =“false”）。我的历史记录会变得混乱，后退按钮将无法正常工作。
即使我使用
（我的后退按钮），index.html也无法正常工作。所以我放弃并将所有内容都放在索引页上。
I had the same problem before and I ended up using multiple page solution. Because I need to back button to work. As soon as I start using single page (data-ajax="false"). my history will mess up and the back button will not work correctly.
Even if I use
(my back button), the index.html will not work properly. So I give up and put everything on index page.
另一种方法是使用
rel="external"，如下所示：完整的教程可以在 jQuery Mobile 和多个页面
An other way to do it is to use
rel="external"as follow:A full tutorial can be found at jQuery Mobile and multiple pages