android - 在 jquery 移动多页面模板结构中遇到问题

标签 android html jquery-mobile cordova

我是 phonegap 的新手。我正在使用带有 html5 的 jquery mobile 来开发 android 应用程序。我的应用程序中有三个页面。首先是 index.html,它包含内容列表。第二页包含文本内容和带有两个按钮的标题,例如backnext。第三页与第二页相同。现在我的问题是,当我单击 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 为 page1page2 的页面。我无法重定向 page2 来自 page1 的标题上的下一个按钮。帮助我摆脱这些问题。提前致谢。

最佳答案

如果您从单页链接到多页,则需要设置 data-ajax="false":

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

关于android - 在 jquery 移动多页面模板结构中遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9373680/

相关文章:

javascript - 提交时重置 div 内容

javascript - 如何替换jquery mobile中的li?

android - 如何更改数据库而不必每次都卸载 APK?

java - 如何解决android studio中隐藏标题栏的问题?

javascript - 单击搜索图标时如何禁用背景?

jquery - 如果我使用 jquery mobile,<a> 标签不起作用

jquery mobile 附加按钮无法正确呈现

android - fragment 垃圾收集

android - 谷歌地图 onResume

python - 使用 Javascript 更改 Django 模型