jQuery Mobile：すべてのページに同じヘッダーフッターを使用

Question

私はすべてのWebページでヘッダーとフッターを作成するコードをハードコーディングする代わりに実装しようとしています。私はこれを試しました：

私は私の "メインページ"でこれを持っていました。

<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()); 

ませサイコロを。いずれにせよ、それは私がそれをどうやってやろうとしているのかについての全部の推測でした。より良い方法がありますか？

Answer 1

.load()を使用すると、リンク先のファイルに含めるコードを入力するだけで問題が解決します。

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

あなたは別のファイルにデータを保持しない場合は別の方法： 私はこれを行っていないが、いくつかの簡単な研究から、あなたはまた、ファイル内の要素にリンクすることができます。

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

Answer 2

クレジットはマリアッチに帰ります。

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(); 
}); 

Answer 3

。私はこれを持っている（ページまたはデータ・役割を持つのdiv =）

<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> 

と後続のすべてのページで：：クローン（）私のマルチjQueryのモバイルプロジェクトで

私は私のメインページにヘッダを持っている

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

、その後、あなたはマスターのクローンを作成し、すべての子どもに追加pageinit上：

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

ED IT：pageinitがあなたのために動作しない場合は、

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