如何为所有jQuery Mobile页面调用页眉和页脚?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何为所有jQuery Mobile页面调用页眉和页脚?相关的知识,希望对你有一定的参考价值。

在那一刻,我正在为所有jQuery Mobile页面编写页眉和页脚。为了清理代码,我希望能够在为每个页面调用它之前声明页眉和页脚是什么。我在这里看到过类似的问题,但有些问题已经过时,似乎没有用。任何人都可以给我一个可以帮助我的明确方法吗?谢谢!

<!-- Page 1 -->
<div data-role="page" id="page1">

<!-- Body -->
        <div id="schoolpositions">
            CONTENT IS LOADED IN FIRST SO THAT THE FIXED HEADER AND FOOTER LOAD OVER IT
        </div>

<!-- Header -->
        <div data-role="header" class="header" data-position="fixed">
            <a href="#page4" class="ui-btn-left" data-icon="user">Profile</a>EduSub Teacher
        </div>

<!-- Footer -->
        <div data-role="footer" id="footer" data-id="footer" data-position="fixed"">
            <div data-role="navbar" class="footernavbar">
                <ul>
                    <li><a class="ui-nodisc-icon" id="activeicon" href="#page1" data-icon="schooliconactive">Search</a></li>
                    <li><a class="ui-nodisc-icon" href="#page2" data-icon="plannericon">Planner</a></li>
                    <li><a class="ui-nodisc-icon" href="#page3" data-icon="briefcaseicon">Jobs</a></li>
                </ul>
            </div>
        </div>

有没有一种方法可以从一个源加载它?而不是为页眉和页脚提供那么多代码?另外,为了这个项目的目的,我宁愿使用php以外的东西。

答案

您可以利用服务器端包含将单个页眉和页脚文件调用到html文档中。这是一个可以帮助您的资源。

https://www.w3.org/Jigsaw/Doc/User/SSI.html

此解决方案是一种替代方法,可以在不使用PHP的情况下为您提供类似的结果。

另一答案

快速谷歌搜索后,我发现了这个:

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

通过声明:在页面上包含导入:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

以上是关于如何为所有jQuery Mobile页面调用页眉和页脚?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mobile的学习 jQuery Mobile工具栏标题栏页脚栏的定位学习

如何为 xsl-fo 中的每个页面添加页眉和页脚以生成 pdf

Jquery Mobile 在不同页面上的相同页脚

如何为使用 jQuery Mobile、PhoneGap 和 Django 实现的移动 Web 应用程序实现首次登录方案?

如何为wordpress主题添加自定义页眉和页脚

JQuery Mobile 默认数据主题