2

我不是在问如何获得固定的页脚。

我有一个多页和单页的结构。我想知道如何为整个网站只使用一个 html 片段。我真的在寻找解决方案，因为我只想在一个地方编辑页脚并在所有页面中查看修改。

谢谢。

编辑：我正在开发一个用PhoneGap 包装的移动应用程序，所以我正在寻找客户端解决方案。

解决方案（将@maco 的解决方案汇总并根据我的情况进行调整）：

$(function() {
// load the templates
$('body').append('<div id="module"></div>');
$('#module').load('templates/module.html :jqmData(role="page")',function() {

    // save the actual footer and header
    var hdhtml = $('#module :jqmData(role="header")').clone();
    var fthtml = $('#module :jqmData(role="footer")').clone();

    // removes the header/footer
    $(':jqmData(role="header")').remove();
    $(':jqmData(role="footer")').remove();

    // load at the correct place the header/footer
    $(':jqmData(role="page")').prepend(hdhtml).append(fthtml).page().trigger('pagecreate');

    // delete the temporary div
    $($(this).html()).replaceAll(this).attr('id', 'module');
});

// set the class "ui-btn-active" for the active page
$(document).live('pagecreate', function() {
    // get the current page
    var currentPage = window.location.pathname;
    currentPage = currentPage.substring(currentPage.lastIndexOf("/") + 1, currentPage.length).split("&")[0];

    // remove the class from the footer
    $($.mobile.activePage + ':jqmData(role="footer") li a')
            .removeClass('ui-btn-active ui-state-persist');

    // add the class to the link that points to the particular href
     $($.mobile.activePage + ':jqmData(role="footer") li a[href="' + currentPage + '"]').addClass('ui-btn-active ui-state-persist');

});
});
4

3 回答 3

1

模块.html

<!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>module header</h1>
            </div>
            <div data-role="footer" class="ui-bar">
                <h3>module footer</h3>
            </div>
        </div>
    </body>
</html>

module.js（在所有页面中加载）

function module() {
    var fthtml = $('#module :jqmData(role="footer")').clone();
    $(':jqmData(role="footer")').remove();
    $(':jqmData(role="page")').append(fthtml).page().trigger('pagecreate');
}

$(function(){
    $('body').append('<div id="module"></div>');
    $('#module').load('YOUR_module.html_PATH :jqmData(role="page")',function(){
        $($(this).html()).replaceAll(this).attr('id','module');
        module();
    });
    $(':jqmData(role="page")').live('pageinit',module);
});

YOUR_module.html_PATH （例如“../module.html”、“../module/module.html”）

于 2012-07-02T14:52:53.910 回答
0

如果您在服务器端生成 HTML 页面，您可以使用您的服务器语言（php、java、node）模板功能从通用文件中插入 HTML。

即对于jsp

    </div>
    <jsp:include page="scripts/footer.jsp" />
    .....
</body>

如果你在 javascript 中做繁重的工作，而不是使用任何 javascript 模板引擎。即http://handlebarsjs.com/

于 2012-07-01T06:21:35.277 回答
0

我通过创建部分页脚视图并在需要的地方调用它来解决这个问题：@Html.Partial("Footer")

于 2014-05-21T15:46:49.913 回答