Question

就我而言，我在运行时从服务器加载不同的子页面，并且那些子容器（div）执行这些加载。容器div然后在div中保存子页面（带有data-role ='page'的div）。

如果subpage-div不是身体的直接孩子，显然导航无效。

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

<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>

Answer 1

您使用插件执行此操作吗？

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

请参阅文档中已知的limiatatons here。

要解决此问题，您可以使用JQM subpage plugin或JQM multiview plugin（目前仍在使用中）。

两者都允许您在包装JQM页面中加载子页面或嵌套页面。它必须是这样的，因为如果你把你的附加页面放在＆＃34;包装器之外＆＃34; 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>

或者您可以使用一个弹出式面板，您可以在内容部分之后在包装页面内进行NEST，但是必须强制覆盖多视图中的某些内容以使弹出框/弹出窗口成为全屏。

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

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

问题是，如果你可以在没有.container的情况下工作吗？

jQuery移动子页面（data-role ='page'）不是身体的直接子

1 个答案: