Question

我是phonegap的新手。我正在使用jquery mobile和html5开发android app。我的app中有三个页面。首先是index.html，它有内容列表。第二页有文本内容和一个标题有两个按钮，例如返回和下一步。第三页与第二页相同。现在我的问题是，当我点击index.html的第一个列表元素时，它会重定向用户到第二页。但是当我点击第二页的下一个按钮时，它应该打开第三页但没有任何反应。

这是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>

这是第二页： -

<!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 。我无法重定向第2页来自 page1 的标题上的下一个按钮。帮助我摆脱这些问题。提前谢谢。

Answer 1

如果从单页链接到多页，则需要设置data-ajax =“false”：

<li><a data-ajax="false" href="chapter1.html">1:-The Big Picture</a> </li>

Answer 2

感谢@ ghm04提供线索：

<li><a data-ajax="false" href="chapter1.html">1:-The Big Picture</a> </li>

如果有人想知道原因（至少我知道），答案就在文档中：

重要的是要注意，如果要从通过Ajax加载的移动页面链接到包含多个内部页面的页面，则需要将rel =“external”或data-ajax =“false”添加到链接。这告诉框架执行整页重新加载以清除URL中的Ajax哈希。这很重要，因为Ajax页面使用散列（＃）来跟踪Ajax历史记录，而多个内部页面使用散列来指示内部页面，因此这两种模式之间的散列会发生冲突。

例如，指向包含多个内部页面的页面的链接如下所示：   多页链接

http://jquerymobile.com/demos/1.0/docs/pages/page-links.html（“在多页文档中链接”）

Answer 3

之前我遇到过同样的问题，最后我使用了多页解决方案。因为我需要按钮才能工作。我一开始使用单页（data-ajax =“false”）。我的历史会搞砸，后退按钮将无法正常工作。即使我使用

<a href="index.html">Back</a>

（我的后退按钮），index.html将无法正常工作。所以我放弃并将所有内容放在索引页面上。

Answer 4

另一种方法是使用rel="external"，如下所示：

<a href="multipage.html" rel="external" >Multi-page link</a>

可以在jQuery Mobile and multiple pages

找到完整的教程

面对jquery移动多页面模板结构中的问题

4 个答案: