Jquery mobile JQuery Mobile，整个站点的一个页脚片段_Jquery Mobile_Footer_Reusability

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

jquery-mobile

Jquery mobile JQuery Mobile，整个站点的一个页脚片段,jquery-mobile,footer,reusability,Jquery Mobile,Footer,Reusability,我不是问如何获得固定页脚我有一个多页和单页的结构。我想知道如何在整个网站上只使用一个html片段。我真的在寻找解决方案，因为我只想在一个地方编辑页脚，并在所有页面中看到修改谢谢编辑：我正在开发一个用PhoneGap包装的移动应用程序，所以我正在寻找客户端解决方案解决方案（通过@maco将解决方案整合在一起，并根据我的案例进行调整）： $（函数（）{ //加载模板 $（'body'）。追加（''）； $（“#module”）.load（'templates/module.html:jq

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

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

谢谢

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

解决方案（通过@maco将解决方案整合在一起，并根据我的案例进行调整）：

$（函数（）{
//加载模板
$（'body'）。追加（''）；
$（“#module”）.load（'templates/module.html:jqmData（role=“page”）”，function（）{
//保存实际的页脚和页眉
var hdhtml=$（“#模块：jqmData（role=“header”））.clone（）；
var fthtml=$（“#模块：jqmData（role=“footer”））.clone（）；
//删除页眉/页脚
$（'：jqmData（role=“header”））.remove（）；
$（'：jqmData（role=“footer”））.remove（）；
//在页眉/页脚的正确位置加载
$（':jqmData（role=“page”））.prepend（hdhtml）.append（fthtml）.page（）.trigger（'pagecreate'）；
//删除临时div
$（$（this.html（））.replaceAll（this.attr（'id'，'module'）；
});
//为活动页面设置类“ui btn active”
$（document）.live（'pagecreate'，function（））{
//获取当前页面
var currentPage=window.location.pathname；
currentPage=currentPage.substring（currentPage.lastIndexOf（“/”）+1，currentPage.length）。拆分（“&”）[0]；
//从页脚中删除该类
$（$.mobile.activePage+'：jqmData（role=“footer”）li a'）
.removeClass（'ui-btn-activeui-state-persist'）；
//将类添加到指向特定href的链接中
$（$.mobile.activePage+）：jqmData（role=“footer”）li a[href=“”+currentPage+”）.addClass（'ui-btn-activeui-state persist'）；
});
});

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

i、 e.对于jsp

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


.....

如果你正在用javascript做一些繁重的事情，那就不要使用任何javascript模板引擎。 ie.e

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（在所有页面中加载）

功能模块（）{
var fthtml=$（“#模块：jqmData（role=“footer”））.clone（）；
$（'：jqmData（role=“footer”））.remove（）；
$（'：jqmData（role=“page”））.append（fthtml）.page（）.trigger（'pagecreate'）；
}
$（函数（）{
$（'body'）。追加（''）；
$（“#module”）.load（'YOUR_module.html_PATH:jqmData（role=“page”）、function（）{
$（$（this.html（））.replaceAll（this.attr（'id'，'module'）；
模块（）；
});
$（'：jqmData（role=“page”））.live（'pageinit'，module）；
});

你的_module.html_路径（例如“./module.html”，“./module/module.html”）

我通过创建部分页脚视图并在需要的地方调用它来解决这个问题：

@html.partial（“页脚”）

谢谢，我知道。我不想使用任何服务器端方法，因为我计划用PhoneGap包装这个应用程序。稍后我将组装演示。好的，现在它开始工作了：我删除了对.live的调用，并在匿名函数中反转了对module（）和replaceAll（）的调用。然而，我不太相信采用这种方式，因为它也会影响对话框。事实上，这种方式不会使对话框变为页脚。你想去吗？我试图让这种方式也用于对话。不，这不是我的目标。我评论说，因为对话框没有正确显示（它们变成了页面，不再是对话框）。相反，您知道如何将参数传递到模板页面吗？例如，在页脚导航中动态设置类ui btn活动可能很有用；页脚导航中的href指向.html页面，而不是#id页面。

<!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>

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);
});