jQUery移动共享页眉和页脚

我正在创建一个phonegap应用程序，并尝试在所有页面之间共享页眉和页脚代码。我想在jqm中使用内部链接，但他们的指南说每个子页面都有标题内容和页面，例如：

<div data-role="page" id="one">

    <div data-role="header">
        <h1>Multi-page</h1>
    </div><!-- /header -->

    <div data-role="content" >  
        <h2>One</h2>

        <p>I have an <code>id</code> of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p> 

        <p>This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple "page" containers inside, unlike a <a href="page-template.html"> single page template</a> that has just one page within it.</p>  
        <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
        <p>You link to internal pages by referring to the <code>id</code> of the page you want to show. For example, to <a href="#two" >link</a> to the page with an <code>id</code> of "two", my link would have a <code>href="#two"</code> in the code.</p>   

        <h3>Show internal pages:</h3>
        <p><a href="#two" data-role="button">Show page "two"</a></p>    
        <p><a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">

    <div data-role="header">
        <h1>Two</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">    
        <h2>Two</h2>
        <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>   
        <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>  
        <p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p> 

    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page two -->

这很好…但我想为每个页面使用相同的数据角色页脚和页眉。复制相同的代码似乎毫无意义（因为每个页面上的设计等都是相同的？）。这是一个phonegap应用程序，每个页面都有很多html，这将是一个愚蠢的重复（拉出菜单等）

正确的方法是什么？我的想法是：

<div data-role="page" id="bar">

    <div data-role="header">
        <h1>Bar</h1>
    </div><!-- /header -->

    <div data-role="content" page=1>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="content" page=2>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="content" page=3>    
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

酒吧
我是源代码顺序中的第二个，所以当页面加载时我是隐藏的。如果点击了引用我id的链接，我就会显示出来。


我是源代码顺序中的第二个，所以当页面加载时我是隐藏的。如果点击了引用我id的链接，我就会显示出来。


我是源代码顺序中的第二个，所以当页面加载时我是隐藏的。如果点击了引用我id的链接，我就会显示出来。


页脚

jQuery Mobile定义了页面结构，其中包括页面包装器

div[data role=page]

因此，如果您想对所有页面使用通用页眉或页脚，则需要将页眉/页脚元素动态注入到当前页面中。您可以使用jquery库方法在页面中追加元素。 这里有一些例子

var currentPage=$.mobile.activePage;

$('<div data-role="header" id="myheader">
        <a href="" >Home</a>
        <a href="" >Back</a>
    </div>').prependTo(currentPage);

$('<div data-role="footer" id="myfooter">
        <a href="">About Us</a>
    </div>').appendTo(currentPage);

var currentPage=$.mobile.activePage；
$('
“）.prependTo（当前页）；
$('
）。附录（当前页）；

---

您可以在jquery mobile中调用触发器创建事件或刷新事件来增强元素。

如果您使用的是JQM 1.4，则可以将页脚/页眉放在page div之外。它们称为外部工具栏。检查这一点同样适用于标题、面板和弹出窗口。我已经看过了这一点和一个剧本，但我仍然无法让它按我想要的方式工作。每页仍有页眉和页脚角色？是否使用JQM 1.4？