Question

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

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

Answer 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*/

jQuery移动多页面phonegap应用程序

1 个答案: