web-dev-qa-db-ja.com

jQueryMobileのページ間で同じヘッダー/フッターを維持するにはどうすればよいですか？

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

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

jqueryjquery-mobilelayoutfooter
18
Muis

最も簡単な方法は、すべてのページのヘッダーとフッターに「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"を使用してヘッダーとフッターを修正することもできます。

お役に立てれば。

14
DRJ

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

9
Gajotres

同様の問題を解決した方法は次のとおりです。

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

JQueryMobileページをナビゲートしている間、同じヘッダー/フッターを維持します。ページ変更時に動的に挿入し、トランジションを台無しにしますが、要素のクローンは作成せず、オリジナルを提供します。

0
Jayen