jQueryMobileページをナビゲートするときに同じヘッダー/フッターを保持する簡単な方法はありますか?私が今までに遭遇した唯一の解決策は、ページを変更する際に動的に注入することに依存しますが、これはトランジションをねじ込み、要素をクローンします。jQueryMobileのページ間で同じヘッダー/フッターを保持する方法は?
公式にサポートされている方法はありますか?私はこの問題に苦しんでいる唯一の人に見えるのは奇妙なことが分かりますか?
jQueryMobileページをナビゲートするときに同じヘッダー/フッターを保持する簡単な方法はありますか?私が今までに遭遇した唯一の解決策は、ページを変更する際に動的に注入することに依存しますが、これはトランジションをねじ込み、要素をクローンします。jQueryMobileのページ間で同じヘッダー/フッターを保持する方法は?
公式にサポートされている方法はありますか?私はこの問題に苦しんでいる唯一の人に見えるのは奇妙なことが分かりますか?
問題の組み込みソリューションが存在しません。 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ピクセル飛びます。これは、実際の生活の例では起こりません。
これは避けたかった解決策のようです。たとえば、フッターにドロップダウンボックスを置き、そこで選択を行うと、クローンのフッターを次のページ。 – Muis
あなたは正しいですが、良い解決策はここにはありません。このようなデータをトランジションの間に保存し、新しいページに再度表示する必要があります。これまで何を考えているのか、これは複雑な解決策の難しさではありません。あなたが望む解決策を探して時間を失うことは間違いないと思います。現在jQuery Mobile 1.3.1のページウィジェットは、ページ外では使用できません。 jQuery Mobile 1でも可能です。4それが出るのを待つ必要があります。それが意図どおりに機能するかどうかは疑問です。 – Gajotres
今のところ私はページシステムの使用を中止し、DIVを隠して/表示することによって他のページをシミュレートする1ページだけを使用します。本当に狂っているのは、通常のページングシステムがこれをサポートしていないからです。とにかく、あなたの助けをありがとう! – Muis
最も簡単な方法は、すべてのページのヘッダーとフッターに「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);
});
が同じヘッダー/フッターを保持します:
は、ここで私は同様の問題を解決する方法です。ページを変更するとダイナミックに挿入され、トランジションをねじ込みますが、要素を複製せずにオリジナルを与えます。
これは、ページへのすべての移行の前にヘッダー/フッターを追加します – HughHughTeotl
追加しません。それは動く。そして、はい、すべての移行の前に。 OPの基準のほとんどに対応する簡単な方法です。 – Jayen
アニメーションなしでトランジション中に固定されていることを意味しますか?または、すべてのページで同じヘッダー/フッターを使用しますか? – Omar
@Omarすべてのページのヘッダー/フッターは同じです。アニメーション化したいのですが、ページ自体がアニメーション化されていれば大きな問題ではありません。 – Muis