如何在同一个html文件中为多个页面使用相同的页眉

我想制作一个基于iPad的HTML5/CSS3的应用程序，并且我发现了关于JQuery Mobile并试图使用它。这里是什么样子：如何在同一个html文件中为多个页面使用相同的页眉

Screenshot from my mobile app

这是汇总页面，当用户点击它应该去适当的详细信息页面网格元素之一。（点击网格“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'>[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的情况下将边框添加到网格？

来源

2012-02-01 TecHunter

1）jQuery Mobile目前不提供持久性页眉和页脚，但是即将推出的1.1版本将会提供。无论他们在转换过程中是否停留在页面上，都还没有得到回答。你最好的选择是为你的页面使用某种服务器端语言，然后将头部设置为包含。这样你就不必复制和粘贴多个页面。 2）jQuery Mobile非常适合构建应用程序，但为了获得真正自定义的内容，您必须亲自编写;是CSS或HTML或两者兼而有之。

3）只有实现自定义高度的方法是编写自定义CSS。

来源

2012-02-03 21:04:06 commadelimited

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

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

至于你最后一个关于边界的问题，你将不得不用CSS来控制它们。无论是否使用内联或样式表（如JQM Themeroller创建的样式表），我都不知道除CSS以外的其他样式边框样式。

希望这会有所帮助！

来源

2012-02-01 21:47:34 shanabus

不仅仅是我是JQuery Mobile的新手，我认为我可以用更少的CSS修改做得更好，例如使用特定的数据角色，因此它适合正确和类似的用途。似乎没有干净的方式来做到这一点。我可以在代码中看到关于标题和布局网格的信息。 – TecHunter 2012-02-01 23:04:50

所以我的文章不回答你的问题？我不确定你能找到什么更好的答案，但我希望被标记为答案或通过更好的解决方案显示出来。 Auf wiedersehen！ – shanabus 2012-02-02 03:32:12

对不起，但我不能，因为你指出了持久页脚/标题或布局网格，但我已经使用所有这些。 – TecHunter 2012-02-02 08:22:06

如何在同一个html文件中为多个页面使用相同的页眉

回答

相关问题