jQuery 移动多页 phonegap 应用程序答案

【问题标题】：jQuery mobile multi page phonegap applicationjQuery 移动多页 phonegap 应用程序
【发布时间】：2012-09-13 19:02:31
【问题描述】：

我想开发一个有登录页面的 phonegap 应用程序，如果登录成功，用户可以看到#page1，根据在#page1 上输入的详细信息，用户可以转到#page2 或#page3。我怎样才能实现这样的场景？我还遇到了this link，如果我正在实现该帖子中“sage”使用的那种布局，如何让我的 other.html 页面包含在我的应用程序中？

实现基于用户输入以编程方式显示/隐藏而不是点击超链接的多个页面的最佳方法是什么？这是我的问题。

【问题讨论】：

不太确定您的要求，要包含它们，您只需包含 html 页面，至于根据用户输入更改页面只需使用 changePage 方法，例如 $.mobile.changePage( "yourPage", { transition: "someTransition"} );

标签： cordova jquery-mobile

【解决方案1】：

Jquery mobile 在多页面转换中也做同样的事情显示隐藏的概念。你也可以用你自己的方式来做。那是你的愿望。

在jquery mobile phonegap中，通常可以通过下面这个例子来完成页面转换，

<html>
<head>
<!-- HERE YOU CAN ADD ALL YOUR INCLUDES -->
<head>
<body>

<!-- This page will show first -->
<div data-role="page" id="index">

    <div data-role="header" data-position="inline" id="indexheader" >
        <h1>Page 1 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div><!-- /footer -->

<!-- SECOND PAGE -->
<div data-role="page" id="pagetwo">

    <div data-role="header" data-position="inline" id="page2header" >
        <h1>Page 2 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div>

<!-- THRIRD PAGE -->
<div data-role="page" id="pagethree">

    <div data-role="header" data-position="inline" id="page3header" >
        <h1>Page 3 Heading</h1>
    </div><!-- /header -->

    <div data-role="content">
        <h3>page Content</h3>
    </div><!-- /content -->

    <div data-role="footer"  data-position="fixed">
    <h3>Footer Text</h3>
    </div>
</div>
</body>
</html>

而且您必须使用 javascript 事件来显示第二页或第三页。

根据条件，像这样加载你的页面，

$.mobile.changePage($('#pagetwo')); /*page navigation the particular where data shown*/
$("#index").trigger("pagecreate"); /*This is like a page refresh in jquery*/

【讨论】：

你能提供多html页面的例子