18

jQueryMobile ページをナビゲートするときに同じヘッダー/フッターを維持する簡単な方法はありますか? これまでに遭遇した唯一の解決策は、ページ変更時に動的に挿入することに依存していますが、これはトランジションを台無しにし、要素を複製するだけです。オリジナルが必要です。

公式にサポートされている方法はありますか？この問題に苦しんでいるのは私だけのように見えるのは奇妙だと思いますか?

4

3 に答える 3

9

あなたの問題に対する組み込みのソリューションは存在しません。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 ～ 2px ジャンプします。これは実際の例では起こりません。

于 2013-05-23T12:46:09.900 に答える