2

在我的情况下，我在运行时从服务器加载不同的子页面，并且那些有容器（div）进行这些加载。然后容器 div 将子页面（具有 data-role='page' 的 div）保存在 div 中。

显然，如果 subpage-div 不是 body 的直接子级，则导航不起作用。

我弄错了吗？有解决方案吗？

<body> 

<!-- Start of first page -->
<div data-role="page" id="foo">

    <div data-role="header">
        <h1>Foo</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p>View internal page called <a href="#bar">bar</a></p> 
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<div class="container">
    <div data-role="page" id="bar">

        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my ID is beeing clicked.</p>      
            <p><a href="#foo">Back to foo</a></p>   
        </div><!-- /content -->

        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</div>

<!-- Start of second page -->

</body>
4

1 回答 1

4

您是否使用插件来执行此操作？

因为 Jquery Mobile 默认只通过 Ajax 加载 FIRST div-data-role-page 的内容。除非它是您的第一页，否则应该完全加载。其他所有内容（头、脚本、您的 container.class 都不会被加载。

请参阅文档中的已知限制。

要解决此问题，您可以使用JQM 子页面插件或JQM 多视图插件（仍在开发中）。

两者都允许您在包装 JQM 页面中加载子页面或嵌套页面。它必须是这样的，因为如果您将附加页面放在“包装器”JQM 页面之外，JQM Ajax 将不会加载它们。

编辑：
基于以下评论：

如果您使用多视图，您可以像这样构建您的页面，尽管这会将所有页面包装在您的容器类中。这可能吗？

 <div data-role="page" data-wrapper="true" id="your_wrapper_page" class="CONTAINER">
    <div data-role="header">
       <p>global header acrolls all pages</p>
    </div>
    <div data-role="panel" data-id="main" data-panel="main" data-hash="history">
        <div data-role="page" id="main_first" data-show="first">
            <div data-role="header" data-position="fixed" data-theme="a">
                <h1>First Page LOCAL HEADER</h1>
            </div>
            <div data-role="content" class="yellow">
                <p>Content</p>
            </div>
            <div data-role="footer">
                <p>first page local footer</p>
            </div>
        </div>
        <div data-role="page" id="main_second">
            <div data-role="header" data-theme="a" data-position="fixed">
                <h1>Second Page LOCAL HEADER</h1>
            </div>
            <div data-role="content" class="brown">
                <div>Lorem Ipsum</div>
            </div>
            <div data-role="footer">
                <p>second page local footer</p>
            </div>
        </div>
    </div>
    <div data-role="footer">
        <p>global footer acrolls all pages</p>
    </div>
</div>

或者，您可以使用弹出面板，您可以在内容部分之后在包装页面内嵌套，但必须强制覆盖多视图中的一些内容以使弹出/弹出窗口全屏。

请注意，我仍在努力使面板转换与 JQM 1.1 保持一致。所以需要一些时间。

除此之外，您必须提出自己的解决方案，因为我认为 JQM 不是这样工作的。

问题是，您是否可以在没有 .container 的情况下工作？

于 2012-04-20T08:11:12.587 回答