如何在同一個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文件中爲多個頁面使用相同的頁眉

回答

相關問題