jQuery mobile子页面（data role='page'）不是body的直接子页面_Jquery_Jquery Mobile

jQuery mobile子页面（data role='page'）不是body的直接子页面

jquery jquery-mobile

jQuery mobile子页面（data role='page'）不是body的直接子页面,jquery,jquery-mobile,Jquery,Jquery Mobile,在我的例子中，我在运行时从服务器加载不同的子页面，这些子页面有容器div进行这些加载。容器div然后在div中保存data role='page'的子页面div 显然，如果子页面div不是身体的直接子对象，导航就不起作用我弄错了吗？有解决办法吗 <body>  <div data-role="page" id="foo"> <div data-role="header">

在我的例子中，我在运行时从服务器加载不同的子页面，这些子页面有容器div进行这些加载。容器div然后在div中保存data role='page'的子页面div

显然，如果子页面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>

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

因为jquerymobile默认情况下只通过Ajax加载第一个div数据角色页面的内容。除非这是你的第一页，应该完全加载。将不会加载头、脚本和container.class的所有其他内容

参见文档中的已知Limiatants

要解决此问题，您可以使用仍在工作中的or

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

编辑：根据以下评论：

如果您使用multiview，您可以像这样构造页面，这将包装容器类中的所有页面。这可能吗

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

或者，您可以使用一个popover面板，您可以将其嵌套在内容部分之后的包装页中，但必须强制覆盖multiview中的某些内容，以使popover/popup成为全屏

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

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

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

您是否使用插件来实现这一点

参见文档中的已知Limiatants

要解决此问题，您可以使用仍在工作中的or

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

编辑：根据以下评论：

如果您使用multiview，您可以像这样构造页面，这将包装容器类中的所有页面。这可能吗

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

或者，您可以使用一个popover面板，您可以将其嵌套在内容部分之后的包装页中，但必须强制覆盖multiview中的某些内容，以使popover/popup成为全屏

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

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

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

非常感谢您的回答。子页面的加载独立于jQuery mobile的AJAX调用。事实上，我面临的唯一问题是导致的情况，如我的示例代码中所示，loadad子页面必须位于容器div中，以避免jquery mobile通过jquery.mobile.changePage“[id]”导航到它们。如果我能为这个电话找到一个可行的解决方法：jQuery.mobile.changePagebar，我会非常高兴：你想实现什么？是否希望有一个不可加载的页面？否。在上面的示例中，我希望调用jQuery.mobile.changePagebar将页面切换到子页面“bar”。这是因为div条嵌套在div.container.Ok的常规页面中，但您被迫将其保留在div.container中，所以不会发生这种情况？非常感谢您的回答。子页面的加载独立于jQuery mobile的AJAX调用。事实上，我面临的唯一问题是导致的情况，如我的示例代码中所示，loadad子页面必须位于容器div中，以避免jquery mobile通过jquery.mobile.changePage“[id]”导航到它们。如果我能为这个电话找到一个可行的解决方法：jQuery.mobile.changePagebar，我会非常高兴：你想实现什么？是否希望有一个不可加载的页面？否。在上面的示例中，我希望调用jQuery.mobile.changePagebar将页面切换到子页面“bar”。这不会发生，因为div条嵌套在div.container.Ok的常规页面中，但您被迫将其保留在div.container中？