Jquery mobile 从页面dom中获取页眉和页脚

我正在用Cordova构建一个移动应用程序，Cordova是MVC结构的主干，jQuery mobile是UI

除了加载新页面时的用户体验外，这一切都很好。实际上，一个新页面是动态创建的，当它准备好时，jquerymobile将处理到该页面的页面转换。在移动浏览器中，这种转换比传统浏览器慢，因此在加载页面时，用户会看到一个空白的白色屏幕，然后显示新页面

问题是关于我的页眉/页脚栏。我希望它在加载内容时保持显示，这样用户在转换期间将看到页眉/页脚和一个空白/白色内容

这是一个经典的页面结构：

<div data-role="page">
    <div data-role="header"></div>
    <div data-role="content"></div>
    <div data-role="footer"></div>
</div>

对我来说，最简单的方法是：

<div data-role="header"></div>
<div data-role="page">
    <div data-role="content"></div>
</div>
<div data-role="footer"></div>

并用CSS定位修复内容

但我想找更聪明的

您认为使用一个JQM页面，主干网只更新每个路由的

怎么样？那么JQM渲染呢？那么转换呢？

文档：

基本上，您可以在每个页面中放置一个

data role=“footer”

元素，如下所示：

<div data-role="footer" data-id="foo-footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Friends</a></li>
            <li><a href="b.html">Albums</a></li>
            <li><a href="c.html">Emails</a></li>
            <li><a href="d.html" >Info</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

请注意

数据id

，它在所有

数据role=“footer”

元素上必须相同，才能利用持久工具栏选项。

data role=“footer”

元素还必须具有

data position=“fixed”

属性

---

这里有一个演示：

那么如果你有20页，你有20页脚？