如何在 jQuery Mobile 创建的子页面上获取页眉和页脚答案

【问题标题】：How to get the header & footer on jQuery Mobile-created subpages如何在 jQuery Mobile 创建的子页面上获取页眉和页脚
【发布时间】：2012-07-01 03:03:27
【问题描述】：

我有一个带有一堆 JQM“页面”的 HTML 文件。因此，我可以创建一个很好的页眉和页脚，它在我的所有页面中都持久存在...除了 JQM 在导航包含子列表的列表时自行创建的页面。

当您单击 Page2，然后单击 Foo 时，您会得到一个 JQM 制造的 Foo 子列表页面，其中包含 Baz1、2 和 3。该页面缺少页眉和页脚。关于如何将它们放入该页面的任何想法，除了将其拆分为手动创建的新页面吗？

谢谢，戴夫

这是一个工作示例页面：http://geology.wwu.edu/dept/testnew/prospectives/test2.php

这是一些演示代码：

<body>
<div data-role="page" id="home">
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div>
    <div data-role="content">
        <h1>Main Content - Page 1</h1>
        <p>Lorem ipsum.</p>
        <ul data-role="listview" data-theme="c">
            <li><a href="#page2" >Page2</a></li>
            <li><a href="#" >Page3</a></li>
        </ul>
    </div>
    <div data-role="footer" data-id="foo" data-position="fixed">
        <div data-role="navbar" data-theme="c">
            <ul>
                <li><a href="#">Ftr1</a></li>
                <li><a href="#">Ftr2</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div>
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
            <li><a href="#" >Foo</a>
            <ul>
                <li><a href="#" >Baz1</a></li>
                <li><a href="#" >Baz2</a></li>
                <li><a href="#" >Baz3</a></li>
            </ul></li>
            <li><a href="#" >Bar</a></li>
        </ul>
    </div>
    <div data-role="footer" data-id="foo" data-position="fixed">
        <div data-role="navbar" data-theme="c">
            <ul>
                <li><a href="#">Ftr1</a></li>
                <li><a href="#">Ftr2</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

我不觉得，反正应该有出来的。创建另一个页面有什么问题？因为它需要通用的页脚/页眉。
你想让它们使用相同的标题吗？如果是这样，为什么不使用data-position="fixed" 作为第 1 页的标题？
@CheapSteaks：该设置与显示相关，与我所写的问题无关。也就是说，我已经做出了你建议的改变。

标签： jquery jquery-mobile html-lists footer

【解决方案1】：

像这样加载js：

$(document).ready(function() {
    var hdhtml = $($.mobile.activePage).children('div').eq(0).clone();
    var fthtml = $($.mobile.activePage).children('div').eq(2).clone();
    $('div:jqmData(role="page")').live('pageinit',function() {
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    });
    if( $('div:jqmData(role="page")').length > 2 ){
        $('div:jqmData(role="header")').remove();
        $('div:jqmData(role="footer")').remove();
        $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml);
    }
});

如果您不习惯将 <h1> 之类的标题标签设置为 <div data-role="header">，请将 height 或 margin-bottom 设置为 header-div。

【讨论】：