如何獲取jQuery Mobile創建的子頁面上的頁眉和頁腳

我有一堆JQM「頁面」的HTML文件。因此，我可以創建一個漂亮的頁眉和頁腳，它在我的所有頁面中都是持久的，除了JQM在瀏覽其中有子列表的列表時自行創建的頁眉和頁腳。如何獲取jQuery Mobile創建的子頁面上的頁眉和頁腳

當你點擊Page2，然後Foo，你會得到一個JQM製作的Foo子列表頁面，Baz1,2和3.這個頁面沒有頁眉和頁腳。關於如何將這些內容加入該頁面的任何想法，都不能將其作爲手動創建的新頁面拆分？

謝謝，戴夫

這裏的工作示例頁面：http://geology.wwu.edu/dept/testnew/prospectives/test2.php

下面是一些演示代碼：

<body> 
<div data-role="page" id="home"> 
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div> 
    <div data-role="content"> 
     <h1>Main Content - Page 1</h1> 
     <p>Lorem ipsum.</p> 
     <ul data-role="listview" data-theme="c"> 
      <li><a href="#page2" >Page2</a></li> 
      <li><a href="#" >Page3</a></li> 
     </ul> 
    </div> 
    <div data-role="footer" data-id="foo" data-position="fixed"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li><a href="#">Ftr1</a></li> 
       <li><a href="#">Ftr2</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div data-role="page" id="page2"> 
    <div data-role="header" class='geobanner'><a href="#home" data-icon="home" data-theme="b" data-direction="reverse">Home</a></div> 
    <div data-role="content"> 
     <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
      <li><a href="#" >Foo</a> 
      <ul> 
       <li><a href="#" >Baz1</a></li> 
       <li><a href="#" >Baz2</a></li> 
       <li><a href="#" >Baz3</a></li> 
      </ul></li> 
      <li><a href="#" >Bar</a></li> 
     </ul> 
    </div> 
    <div data-role="footer" data-id="foo" data-position="fixed"> 
     <div data-role="navbar" data-theme="c"> 
      <ul> 
       <li><a href="#">Ftr1</a></li> 
       <li><a href="#">Ftr2</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-06-29 Dave Hirsch

我不認爲，應該有反正。創建另一個頁面有什麼問題？因爲它需要通用頁腳/頁眉。 – Nachiket

你想讓他們使用相同的頭？如果是這樣，爲什麼你不使用'data-position ='fixed''作爲頁面1的標題？ – CheapSteaks

@CheapSteaks：該設置是與顯示相關的，與我正在寫的問題無關。這就是說，我已經做出了你所建議的改變。 –

加載JS是這樣的：

$(document).ready(function() { 
    var hdhtml = $($.mobile.activePage).children('div').eq(0).clone(); 
    var fthtml = $($.mobile.activePage).children('div').eq(2).clone(); 
    $('div:jqmData(role="page")').live('pageinit',function() { 
     $('div:jqmData(role="header")').remove(); 
     $('div:jqmData(role="footer")').remove(); 
     $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml); 
    }); 
    if($('div:jqmData(role="page")').length > 2){ 
     $('div:jqmData(role="header")').remove(); 
     $('div:jqmData(role="footer")').remove(); 
     $('div:jqmData(role="page")').prepend(hdhtml).append(fthtml); 
    } 
});

如果您不要設置標題標籤，如<h1>至<div data-role="header">，將高度或margin-bottom設置爲header-div。

來源

2012-07-01 20:48:59 maco

如何獲取jQuery Mobile創建的子頁面上的頁眉和頁腳

回答

相關問題