1

我正在使用 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 渲染呢？那么过渡呢？

4

1 回答 1

0

文档：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/

于 2012-04-24T02:36:01.303 回答