ヘッダーとフッターをページから外します

Question

MVC構造用のCordova、Backbone、UI用のjQuery Mobileでモバイルアプリを構築しています。

これは、新しいページを読み込む際のユーザーエクスペリエンスを除いてうまく機能します。実際には新しいページが動的に作成され、準備ができたらjqueryモバイルはこのページへのページ遷移を処理します。モバイルブラウザでは、この遷移は古典的なブラウザよりも遅いため、ページが読み込まれている間にユーザーに空の白い画面が表示され、新しいページが表示されます。

問題は私のヘッダー/フッターバーに関するものです。コンテンツがロードされている間は表示を続けたいので、移行中にヘッダー/フッターと空白のコンテンツしか表示されません。

だから、これは古典的なページ構造である：私にとって

<div data-role="page"> 
    <div data-role="header"></div> 
    <div data-role="content"></div> 
    <div data-role="footer"></div> 
</div> 

行くための最も簡単な方法は、そのようなものです：

<div data-role="header"></div> 
<div data-role="page"> 
    <div data-role="content"></div> 
</div> 
<div data-role="footer"></div> 

とCSSのポジショニングとの内容を修正します。

しかし、私はもっとスマートなものを探していたいと思います。

Backboneが各ルートの<div data-role="content">を更新するだけで、1つのJQMページを持つと思いますか？ JQMレンダリングはどうですか？トランジションはどうですか？

Answer 1

ドキュメント：あなたはこのような各ページでdata-role="footer"要素入れhttp://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

基本的には：

<div data-role="footer" data-id="foo-footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="a.html">Friends</a></li> 
      <li><a href="b.html">Albums</a></li> 
      <li><a href="c.html">Emails</a></li> 
      <li><a href="d.html" >Info</a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 

お知らせdata-idを、それが永続的なツールバーを利用するために、すべてのdata-role="footer"要素に同じでなければなりませんオプション。 data-role="footer"要素には、data-position="fixed"属性も必要です。ここで

はデモです：あなたは20ページをお持ちの場合http://jsfiddle.net/SpRAA/