2

我有一个带有一堆 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>
4

1 回答 1

1

像这样加载js：</p> 

$(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">，请将高度或边距底部设置为 header-div。

于 2012-07-01T20:48:59.120 回答