jQuery Mobile：爲所有頁面使用相同的頁眉頁腳

我試圖實現一些代碼，這些代碼將在我的所有網頁上創建頁眉和頁腳，而不是硬編碼它們。我試過這個：jQuery Mobile：爲所有頁面使用相同的頁眉頁腳

我在我的「主頁」中有過這個，我只是打包了我想要的div的頭文件。

<div id="headerProto"> 
    <div data-role="header" data-position="fixed" data-theme="b"> 
     <h1> Title </h1>   
    </div> 
</div>

然後在其他頁面我有：

<div class="headerChild"> 
</div>

我說：

$(".headerChild").html($("#headerProto").html());

沒有骰子。無論哪種方式，這都是我應該如何去做的總猜測。有沒有更好的辦法？

來源

2012-03-08 JoshDG

你無法使用像PHP動態服務器端語言生成這些頁面？那將是最好的方法。 – Brandan 2012-03-08 16:14:11

http://stackoverflow.com/questions/9152446/creating-templated-persistant-header-footer-template-in-jquery-mobile-and-phoneg/9204896#9204896 – bmurmistro 2012-03-08 17:15:52

使用.load()可能會有所幫助，那麼只需將要包含的代碼放入要鏈接的文件即可。

$('.headerChild').load('pathto/headerProto.html')

，如果你不希望保留的數據在一個單獨的文件的另一種方法：我沒有這樣做，但是從一些快速的研究，你也可以鏈接到一個元素的文件中。

$('.headerChild').load('pathto/mainPage.html #headerProto')

來源

2012-03-08 16:03:54 atrljoe

完美。謝謝！ – JoshDG 2012-03-08 16:19:19

信用轉到墨西哥流浪樂隊。

http://forum.jquery.com/topic/jquery-mobile-fixed-header-and-footer-on-page-transition

我只是粘貼他的解決方案。

1.）包裝你的data-role =「header」，並把id =「constantheader-wrapper」。

移動SIDOR

，如果你想在頭包裝使用一個div，但儘量有充分的渲染頭輸出像在這種情況下，否則將失去的造型，當你重裝頁面。注意！把標題放在你的第一頁，然後這個方法只是將標題html添加到所有其他頁面。

2）將功能文件或內嵌腳本：

jQuery.fn.headerOnAllPages = function() { 
    var theHeader = $('#constantheader-wrapper').html(); 
    var allPages = $('div[data-role="page"]'); 

    for (var i = 1; i < allPages.length; i++) { 
     allPages[i].innerHTML = theHeader + allPages[i].innerHTML; 
    } 
};

3）從文件準備調用函數，例如：

$(document).ready(function() { 
    $().headerOnAllPages(); 
});

來源

2013-07-21 19:32:31

1）作爲流浪寫了一個樣本這裏可能不太清楚 '<標題ID =「constantheader-包裝」>

...

' – 2015-11-12 10:14:57

我使用。克隆（）

在我的多頁jQuery Mobile的項目，我有我的主網頁上的標題：

<div data-role="header" data-id="header" class="ui-header ui-bar-b" role="banner" id="headerMaster"> 
    <a href="#my-menu">Menu</a> 
    <h1 class="ui-title" role="heading" aria-level="1">My Header</h1> 
</div>

，並在所有的後續頁面（或數據角色的div =頁）我有這樣的：

<div class="headerChild"> 
</div>

，然後pageinit你克隆主機和附加到所有的孩子：

$(document).delegate("#index", "pageinit", function() { 
     $("#headerMaster").clone().appendTo(".headerChild"); 
});

ED IT：如果pageinit不爲你工作，嘗試pagebeforecreate事件

$(document).delegate("#index", "pagebeforecreate", function() { 
    $("#headerMaster").clone().appendTo(".headerChild"); 
});

來源

2013-11-15 17:03:54

這對我的作品，但我不得不把它（文件）。就緒，而不是的代表。 – 2015-03-07 22:29:06

@MarcelMarino再次看我的代碼回購它看起來像我從pageinit事件改爲pagebeforecreate事件，所以也許我也有pageinit的麻煩 - 我不記得它太早前:)我會添加一個編輯到答案 – 2015-03-09 09:15:05

jQuery Mobile：爲所有頁面使用相同的頁眉頁腳

回答

相關問題