面对jquerymobile的多页面模板结构中的问题

Question

面对jquerymobile的多页面模板结构中的问题

him*_*shu 2 html5 android jquery-mobile cordova

我是phonegap的新手.我正在使用jquery mobile和html5开发android app.I我的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>

Run Code Online (Sandbox Code Playgroud)

这是第二页: -

<!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>

Run Code Online (Sandbox Code Playgroud)

我在第二页使用多页面技术.在第二页我有两个页面,其中包含id1和page2.我无法从页面上的page1的下一个按钮重定向page2.帮助我摆脱这些问题.谢谢提前.

Answer 1

gmh*_*h04 6

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，10 月前
查看次数：	2742 次
最近记录：	13 年，2 月前