jQueryMobileのページ間で同じヘッダー/フッターを保持する方法は？

Question

jQueryMobileページをナビゲートするときに同じヘッダー/フッターを保持する簡単な方法はありますか？私が今までに遭遇した唯一の解決策は、ページを変更する際に動的に注入することに依存しますが、これはトランジションをねじ込み、要素をクローンします。

公式にサポートされている方法はありますか？私はこの問題に苦しんでいる唯一の人に見えるのは奇妙なことが分かりますか？

Answer 1

問題の組み込みソリューションが存在しません。 jQuery Mobileには、ロードされたページの間でヘッダーとフッターを共有するソリューションはありません。

あなたができる唯一のことは、それらを力学的に注入することまたは最初からそれらを持たせることです。あなたの場合、あなたは間違った時にそれをやっています。ヘッダーとフッターを正しく追加するには、正しいページイベント中にヘッダーとフッターを行う必要があります。

作業例：（私はすべてのページにボタンを追加することを気にしたくなかった）ページを変更し、それがどのように動作するかを確認するhttp://jsfiddle.net/Gajotres/xwrqn/

スワイプ。

$(document).on('pagebeforecreate', '#article2, #article3', function(){ 
    $('<div>').attr({'data-role':'header','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article</h3>').appendTo($(this)); 
    $('<div>').attr({'data-role':'footer','data-theme':'b','data-position':'fixed','data-id':'footer'}).append('<h3>Article footer</h3>').appendTo($(this));  
}); 

ページの作成中にこれを行うと、ページが初めて作成されたときにのみトリガーされます。動的コンテンツが追加され、コンテンツマークアップが強化される前にpagebeforecreateがトリガーされるため、ヘッダーとフッターのスタイリングについて心配する必要はありません。

属性 'data-id'：すべてのヘッダーとフッターに「フッター」が追加されていることに注目してください。ページ遷移中にコンテンツのみがアニメーション化されるため、ヘッダーとフッターは同じように見えます。また、jsFiddleにはバグがあります。ページをスワイプすると1〜2ピクセル飛びます。これは、実際の生活の例では起こりません。

Answer 2

最も簡単な方法は、すべてのページのヘッダーとフッターに「data-id」属性を追加することです。ヘッダー/フッターを「永続的」にするには、すべてのページで同じdata-idを使用します。

<div id="page1"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

<div id="page2"> 
<div data-role="header" data-id="main-header"></div> 
... 
<div data-role="footer" data-id="main-footer"></div> 
</div> 

また、cssまたはdata-position = "fixed"でヘッダーとフッターを修正したい場合もあります。

これが役に立ちます。 jQueryMobileページをナビゲートしながら、

 $(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) { 
      $("#header").prependTo(ui.toPage); 
      $("#control-panel").appendTo(ui.toPage); 
     }); 

が同じヘッダー/フッターを保持します：

Answer 3

は、ここで私は同様の問題を解決する方法です。ページを変更するとダイナミックに挿入され、トランジションをねじ込みますが、要素を複製せずにオリジナルを与えます。