如何在同一个html文件中为多个页面使用相同的标题答案

【问题标题】：How to use same header for multiple page inside same html file如何在同一个html文件中为多个页面使用相同的标题
【发布时间】：2012-02-01 16:38:24
【问题描述】：

我想制作一个基于 iPad HTML5/CSS3 的应用程序，我发现了 JQuery Mobile 并尝试使用它。这是它的样子：

这是摘要页面，当用户单击其中一个网格元素时，它应该转到正确的详细信息页面。（点击网格“a”应该会转到ID为“blockA”等的内页......）。

我遇到了一些问题，在网上找不到任何明确的线索。

我希望修复我的标题 + 照片和摘要 +“信息”栏。我找到的唯一解决方案是将标题 div 复制/粘贴到我的“blockA”页面和其他 5 个我觉得很烦人的页面中。基本上我希望我的顶部屏幕被固定，我的底部屏幕在链接导航上改变。我想过使用 jquery append 方法等，但是有没有“本机”的方法呢？
我的标头真的很难带上，就像您在图片上看到的那样。我不得不稍微改变一下 CSS。有没有更简单的方法？我可能在 JQuery 结构 CSS 中错过了一些课程？找不到任何 JQM 的详尽课程列表。
如何在不修改 CSS 的情况下为我的不同组件设置高度。

这是我的一些 HTML 代码：

    <body>
    <div data-role="page" id="page_main" style="min-height: 496px; ">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>

            <div class="ui-grid-b">
                <div class="ui-block-a">
                    <a href="#blockA"><span id='ptaGetUserBlockA'>a</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockB"><span id='ptaGetUserBlockB'>b</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockC"><span id='ptaGetUserBlockC'>c</span></a>
                </div>
                <div class="ui-block-a">
                    <a href="#blockD"><span id='ptaGetUserBlockD'>d</span></a>
                </div>
                <div class="ui-block-b">
                    <a href="#blockE"><span id='ptaGetUserBlockE'>e</span></a>
                </div>
                <div class="ui-block-c">
                    <a href="#blockF"><span id='ptaGetUserBlockF'>f</span></a>
                </div>
            </div>

    </div>
    <div data-role="page" data-title="Page Foo" id="blockA">
        <div data-role="header" id="nav-header-pleiades" data-add-back-btn="true" data-back-btn-text="Retour à la sélection">
            <h1>Dossier de <span class='ptaGetUser' attribute-value='Name'>Mr. XXXXXXX</span></h1>
            <ul data-role="listview">
                <li class="pta-file-content" data-icon="custom" data-theme="c">
                    <img class="pta-img-collab" src="img/collab/Pic-S.jpg"/>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='title'>Mr.</span> <span class='ptaGetUser' attribute-value='firstname'>Whatever</span> <span class='ptaGetUser' attribute-value='lastname'>X</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='mail'>whatever.x@mail.com</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='birthdate'>09/03/1984</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='phone'>0450090909</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='work_id'>1656486m</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='assignment'>Ingénieur débutant</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p><span class='ptaGetUser' attribute-value='status'>Status</span></p>
                        </div>
                        <div class="ui-block-b">
                            <p><span class='ptaGetUser' attribute-value='building'>Company</span></p>
                        </div>
                        <div class="ui-block-a">
                            <p>Employé depuis <span class='ptaGetUser' attribute-value='employee_since'>01/09/2010</span></p>
                        </div>
                    </div>
                </li>
            </ul>
            <h1 class="ui-title">Informations</h1>
        </div>
        mon bloc A
    </div>
</body>

不要看 ptaGetUser 跨度，这是为了我以后的持久性框架，我应该努力为这样的 HTML 页面添加无缝持久性。现在，虽然这只是徒劳无功。我也只为这个例子添加了第一个块。

我的 CSS 使它成为正确的尺寸：

.ui-title,.ui-title
{
    height:24px;
}

.banner
{
    height:45px;
    padding: 0px 15px !important;
}

.ui-li-thumb, .ui-li-icon {
    max-width:165px;
    max-height:165px;
}

.pta-file-content
{
    height:148px;
}

.ui-li-has-thumb
{
    padding-left: 165px !important;
}
.ui-grid-a
{
    padding-top: 5px;
}
.ui-grid-b
{
    height:543px;
    width: 1022px;
}

.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b,.ui-grid-b .ui-block-c
{
    height:50%;
    width:32%;
    border: 1px solid black;
}

当我单击第一个网格元素以显示页面时，整个屏幕都会滑动。如您所见，我已将整个标题复制到我的第二页 div 中，这对代码的可读性非常不利。我的网格边框也有 CSS 问题，因为它不显示底部边框，如何在不修改 CSS 的情况下向网格添加边框？

【问题讨论】：

标签： html css jquery-mobile

【解决方案1】：

1) jQuery Mobile 目前不提供持久的页眉和页脚，但即将推出的 1.1 版本将提供。他们是否在过渡期间留在页面上尚未得到回答。您最好的选择是为您的页面使用某种服务器端语言，然后将标题设置为包含。这样您就不必跨多个页面进行复制和粘贴。

2) jQuery Mobile 非常适合构建应用程序，但要获得真正自定义的内容，您必须自己编写；是那个 CSS 或 HTML 或两者兼而有之。

3) 为您的元素实现自定义高度的唯一方法是编写自定义 CSS。

【讨论】：

【解决方案2】：

听起来您正在尝试在不修改 CSS 的情况下做很多事情。为什么这是您项目的要求？

听起来您正在寻找持久标头。 Start here 与 JQM 页脚文档。它们涵盖了持久性，并且对于标头应该是相同的。如果 JQM 文档没有解决此问题，请查看此other Stackoverflow post。
如果您正在寻找自定义配置，请查看此documentation on JQM headers 的最底部。如果还不行，你也可以试试the JQM layout grids。否则，您将需要 CSS，无论是内联的还是其他的。
虽然我不确定我是否完全理解这里的问题，但我听说应该使用 CSS/HTML 来控制布局宽度，而不是高度。抱歉，找不到支持它的文章，所以让我们只考虑一种设计理念。同样，这篇博文告诉你如何均匀balance height with CSS。

关于边框的最后一个问题，您必须使用 CSS 来控制它们。无论您是内联还是使用JQM Themeroller 创建的样式表，我不知道除 CSS 之外的任何其他样式边框的方式。

希望这会有所帮助！

【讨论】：

不，只是我是 JQuery Mobile 的新手，我认为我可以通过更少的 CSS 修改（例如使用特定的数据角色）做得更好，这样它就适合了。似乎没有干净的方法可以做到这一点。正如您在我的代码中看到的那样，我了解标题和布局网格。
所以我的帖子没有回答你的问题？我不确定你能找到什么更好的答案，但我希望能被标记为答案或被更好的解决方案显示出来。 Auf wiedersehen！
对不起，我不能，因为你指的是持久的页脚/页眉或布局网格，但我已经使用了所有这些。