JQueryMobileページをナビゲートしている間、同じヘッダー/フッターを維持する簡単な方法はありますか?私がこれまでに遭遇した唯一の解決策は、ページ変更時に動的にそれを注入することに依存していますが、これは遷移を台無しにし、要素を複製するだけです。オリジナルが必要です。
では、公式にサポートされている方法はありますか?この問題に苦しんでいるのは私だけだと思うのは奇妙だと思いますか?
最も簡単な方法は、すべてのページのヘッダーとフッターに「data-id」属性を追加することです。ヘッダー/フッターを「永続的」にするには、すべてのページで同じデータ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"を使用してヘッダーとフッターを修正することもできます。
お役に立てれば。
問題に対する組み込みのソリューションは存在しません。 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中にこれを行うと、ページが初めて作成されたときに1回だけトリガーされます。動的コンテンツが追加され、コンテンツのマークアップが拡張される前にpagebeforecreateがトリガーされるため、ヘッダーとフッターのスタイルについて心配する必要はありません。
すべてのヘッダーとフッターに属性「data-id」:「footer」が追加されていることに注意してください。これは、ページ遷移中にコンテンツのみがアニメーション化されるため、ヘッダーとフッターは同じように見えます。また、jsFiddleにはバグがあり、ページをスワイプすると1〜2ピクセルジャンプします。これは実際の例では起こりません。
同様の問題を解決した方法は次のとおりです。
$(":mobile-pagecontainer").on("pagecontainerbeforetransition", function (event, ui) {
$("#header").prependTo(ui.toPage);
$("#control-panel").appendTo(ui.toPage);
});
JQueryMobileページをナビゲートしている間、同じヘッダー/フッターを維持します。ページ変更時に動的に挿入し、トランジションを台無しにしますが、要素のクローンは作成せず、オリジナルを提供します。