Question

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

我有一个包含多页和单页的结构。我想知道如何只为整个网站使用一个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');

});
});

Answer 1

module.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”）

Answer 2

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

即。对于jsp

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

如果你在javascript中做很多事情而不是使用任何javascript模板引擎。 ie.e http://handlebarsjs.com/

Answer 3

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

JQuery Mobile，整个站点的一个页脚片段

3 个答案: