如何在同一个 html 文件中的多个页面使用相同的标头
我想制作一个基于 iPad HTML5/CSS3 的应用程序，我发现了 JQuery Mobile 并尝试使用它。它看起来像这样：
这是当用户单击其中一个网格时的摘要页面元素它应该转到正确的详细信息页面。 （点击网格“a”应该转到ID为“blockA”等的内部页面...）。
我遇到了一些问题，在网上找不到任何明确的线索。
- 我希望修复我的标题+照片和摘要+“信息”栏。我找到的唯一解决方案是将标题 div 复制/粘贴到我的“blockA”页面和其他 5 个页面中，我发现这真的很烦人。基本上，我希望固定顶部屏幕，并在链接导航上更改底部屏幕。我想过使用 jquery 附加方法等，但是有没有任何“本机”方法可以这样做？
- 我的标题真的很难带，就像你在图片上看到的那样。我不得不稍微改变一下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'>[email protected]</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'>[email protected]</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 的情况下向网格添加边框？
I want to make an iPad HTML5/CSS3 based app and I found out about JQuery Mobile and tried to use it. Here what it looks like :
This is the summary page, when a user clicks on one of the grid element it should go to the proper detail page. (Click on grid "a" should go to an inner page with id "blockA" etc...).
I encoutered some problems and cannot find any clear clues on the net.
- I want my header + photo and summary + "informations" bar to be fixed. The only solution I found is to copy/paste the header div into my "blockA" page and into the 5 others which I found really annoying. Basically I want my top screen to be fixed and my bottom screen to change on link navigation. I thought of using jquery append methods and such but is there any "native" way of doing so?
- My header was really hard to bring like you can see it on the picture. I had to change the CSS a bit. Is there any easier way? Some class I missed in the JQuery structure CSS maybe? Can't find any exhaustive class list for JQM.
- How to set heights for my different components without modifying CSS.
Here is some of my HTML code :
<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'>[email protected]</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'>[email protected]</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>
Don't look at the ptaGetUser spans, it's for my later persistence framework that I should work on to add seamless persistence to HTML pages like this. For now though this is just here for nothing. I've also only added the first block for this exemple.
My CSS to make this the right dimension :
.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;
}
The whole screen slides when I click on the first grid element to show the page. As you can see I've copied the whole header into my second page div which is really bad for code readability. I also have CSS problems with my grid borders as it doesn't show bottom borders, how can I add borders to a grid without modifying CSS?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
1) jQuery Mobile 目前不提供持久页眉和页脚，但即将推出的版本 1.1 将提供。它们在转换过程中是否留在页面上还没有答案。最好的选择是为您的页面使用某种服务器端语言，然后将标题设置为包含。这样您就不必在多个页面上复制和粘贴。
2) jQuery Mobile 非常适合构建应用程序，但要获得真正自定义的东西，您必须自己编写； CSS 或 HTML 或两者兼而有之。
3) 实现元素自定义高度的唯一方法是编写自定义 CSS。
1) jQuery Mobile doesn't currently offer persistent headers and footers, but an upcoming version, 1.1, will. Whether or not they stay on the page during transitions is something that has not yet been answered. Your best bet is to use some sort of server-side language for your pages, then set the header as an include. That way you don't have to copy and paste across multiple pages.
2) jQuery Mobile is great for building apps, but to get something truly custom, you've got to write it yourself; be that CSS or HTML or both.
3) Only way to achieve custom heights for your elements is to write custom CSS.
听起来你正在尝试在不修改 CSS 的情况下做很多事情。为什么这是您的项目的要求？
听起来您正在寻找一个持久的标头。 从这里开始 JQM 页脚文档。它们涵盖了持久性，并且标头应该是相同的。如果 JQM 文档无法解决此问题，请查看此其他 Stackoverflow 帖子。< /p>
如果您正在寻找自定义配置，请查看此有关 JQM 标头的文档。如果这还不能完全解决问题，您还可以尝试JQM 布局网格。否则，您将需要 CSS，无论是内联还是其他形式。
虽然我不确定我是否完全理解这里的问题，但我听说应该使用 CSS/HTML 来控制布局宽度，而不是高度。抱歉，无法找到支持这一点的文章，所以我们只考虑一种设计理念。同样，这篇文章告诉你如何均匀用 CSS 平衡高度.
至于你最后一个关于边框的问题，你必须使用 CSS 来控制它们。无论您是内联还是使用 JQM Themeroller 创建的样式表，我都不知道除 CSS 之外的任何其他样式边框方式。
希望这有帮助！
It sounds like you are trying to do a lot without modifying CSS. Why is that a requirement of your project?
It sounds like you are looking for a persistent header. Start here with the JQM Footers documentation. They cover persistence and it should be the same for headers. If the JQM docs do not solve this issue, check out this other Stackoverflow post.
If you are looking for a custom configuration, check out the very bottom of this documentation on JQM headers. If that doesn't quite do it you may also try the JQM layout grids. Otherwise, you will need CSS, be it inline or otherwise.
While I am not sure I completely understand the problem here, I have heard that CSS/HTML should be used to control layout width, but not height. Sorry, having trouble finding the articles to back that up so lets just consider that one design philosophy. Just the same, this post tells you how to evenly balance height with CSS.
As for your last question about borders, you would have to use CSS to control them. Whether or not you do it inline or a stylesheet like one created with the JQM Themeroller, I am not aware of any other way of styling borders other than CSS.
Hope this helps!