0

我使用 phonegap 为 ios 和 android 开发了一个应用程序。这是一个字典应用程序，它将在多个选项卡中显示结果（选项卡是一个 div，每个 div 将显示不同的内容）。我使用自己的代码，因此任何时候都只显示一个 div。现在我想包含 jquerymobile，以便在切换到其他 div 时可以应用动画/过渡。

所以我将 data-role="page" 添加到每个 div，我认为它会立即工作（如下面的示例代码）。但有些不对劲。

    <!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.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head> 
    <body> 
    <table id="headergroup">
    <tr><td>
       <input>.........
       <img>.......
    </table>
<wrapper>
    <div data-role="page" id="tab1">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>
        <div data-role="content">   
            <p>Page1 content goes here.</p>     
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
    .........other div......
    <div data-role="page" id="tabN">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>
        <div data-role="content">   
            <p>PageN content goes here.</p>     
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
    </wrapper>
    <div id="footer>
     <img .......>
    </div>
    </body>
    </html>

假设，我的应用程序应该只在包装器中显示 div(s)。但问题是，现在我的应用程序将在全屏和其他元素之上显示带有 data-role=page 的 div（我的应用程序页眉和页脚未显示）。

我的实现是否正确？我该如何克服这个问题？谢谢。

4

1 回答 1

0

您可以在第一页上解决这个问题，但在您通过 JQM-Ajax（默认）加载的所有其他页面上，您只会从第一个（！） div-data-role="page" 中获取内容您正在加载的页面。其他所有内容（表、第 2、第 3 页 div 将不会被加载，因为它在 page-div 之外。

查看有关页面解剖和链接页面的 JQM 文档。

JQM 基于 page-divs，因此在您的代码中，page-div 将获得大多数“JQM 关注”，设置为全屏尺寸，并且当然会悬停在其他所有内容之上。

要使用 JQM，您可以选择

单页布局 = 逐页
多页布局 = 一个文档中包含多个页面。

由于您使用的是 Phonegap，我认为它最终会将所有内容捆绑到一个文件中，因此使用多页可能会更好。如果您需要从初始页面加载具有多个“嵌套页面”的文档，还有一个子页面小部件或multiview 。

于 2012-05-30T06:53:40.197 回答