Question

我使用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。但问题是，现在我的应用程序将全屏显示带有data-role =页面的div，并显示在其他元素之上（我的app页眉和页脚未显示）。

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

Answer 1

你可以在第一页上看到这个，但是在你通过JQM-Ajax加载的所有其他页面上（默认），你只会抓住你的第一个（！）div-data-role =“页面里面的内容“从您正在加载的页面。其他所有内容（table，2nd，3rd page-div都不会加载，因为它位于page-div之外。

查看page anatomy和linking pages上的JQM文档。

JQM基于page-divs，因此在你的代码中，page-div将把大多数“JQM注意力”设置为全屏大小，并将cource悬停在其他所有内容之上。

要使用JQM，您可以选择

Single page layout = page by page by Multi pape layout =一个文档中包含多个页面。

由于您正在使用Phonegap，我认为最终将所有内容捆绑到一个文件中，您可能会更好地使用多页。如果您需要从初始页面加载包含多个“嵌套页面”的文档，还有一个subpage窗口小部件或multiview。

JQM：具有数据角色页面的Div将位于其他元素之上

1 个答案: