2

たくさんのJQM「ページ」を含むHTMLファイルがあります。したがって、このファイル内のすべてのページで永続的な優れたヘッダーとフッターを作成できます...サブリストが含まれているリストをナビゲートするときにJQMが独自に作成するものを除きます。

Page2、次にFooをクリックすると、FooサブリストのJQMで作成された、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">、heightまたはmargin-bottomをheader-divに設定します。

于 2012-07-01T20:48:59.120 に答える