Question

我正在构建一个带Cordova的移动应用程序，用于MVC结构的Backbone和用于UI的jQuery Mobile。

除了加载新页面时的用户体验之外，这很有效。实际上，新页面是动态创建的，当它准备就绪时，jquery mobile会处理页面到此页面的过渡。在移动浏览器中，此转换比在传统浏览器中慢，因此在加载页面时，用户会看到一个空白的白色屏幕，然后显示新页面。

问题与我的页眉/页脚栏有关。我希望它在内容加载时继续显示，因此用户将在转换过程中看到页眉/页脚和仅空白/白色内容。

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

<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页面，Backbone只为每条路线更新<div data-role="content">？ JQM渲染怎么样？转换怎么样？

Answer 1

文档：http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

基本上你在每个页面中放置一个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 -->

注意data-id，它必须在所有data-role="footer"元素上相同才能利用持久工具栏选项。 data-role="footer"元素也必须具有data-position="fixed"属性。

以下是演示：http://jsfiddle.net/SpRAA/

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

1 个答案: