如何在同一个html文件中为多个页面使用相同的标题
Posted
技术标签:
【中文标题】如何在同一个html文件中为多个页面使用相同的标题【英文标题】：How to use same header for multiple page inside same html file 【发布时间】：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 的情况下向网格添加边框？
【问题讨论】：
【参考方案1】：1) jQuery Mobile 目前不提供持久的页眉和页脚，但即将推出的 1.1 版本将提供。他们是否在过渡期间留在页面上尚未得到回答。您最好的选择是为您的页面使用某种服务器端语言，然后将标题设置为包含。这样您就不必跨多个页面进行复制和粘贴。
2) jQuery Mobile 非常适合构建应用程序，但要获得真正自定义的内容，您必须自己编写；是那个 CSS 或 HTML 或两者兼而有之。
3) 为您的元素实现自定义高度的唯一方法是编写自定义 CSS。
【讨论】：
【参考方案2】：听起来您正在尝试在不修改 CSS 的情况下做很多事情。为什么这是您项目的要求？
听起来您正在寻找持久标头。 Start here 与 JQM 页脚文档。它们涵盖了持久性，并且对于标头应该是相同的。如果 JQM 文档没有解决此问题，请查看此other *** 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！ 对不起，我不能，因为你指的是持久的页脚/页眉或布局网格，但我已经使用了所有这些。以上是关于如何在同一个html文件中为多个页面使用相同的标题的主要内容，如果未能解决你的问题，请参考以下文章
如何在单个 C# 函数中为两个或多个不同的变量使用相同的名称？ [关闭]
为报表选择多个参数，如何在参数列表中为每个项目创建多个页面？
如何在 Core Data 中为多个对象（相同实体类型）生成数组实例？