MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slide"などのアニメーションが設定されていると、ページ遷移時に、サンプルコードの実行結果のようにヘッダ、フッタも同じアニメーションで切り替わります。ヘッダ、フッタにdata-id属性で同じIDを指定すると、ページ遷移時どちらにも移動せず、画面にそのまま残り続けます。内容は遷移後のページのものに切り替わります。
ですが、条件があり、遷移前後のページのヘッダ、フッタにはそれぞれdata-position="fixed"も設定されていなければなりません。これらの属性はヘッダ、フッタのいずれかを設定するだけでも動きます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 移動しないヘッダ、フッタIDを利用する</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page1" data-role="page"> <header data-role="header" data-id="header" data-position="fixed"> <h4>ヘッダ</h4> <a href="#page2" class="ui-btn-right" data-icon="arrow-r" data-theme="d" data-transition="slide">次へ</a> </header> <article data-role="content"> <p>コンテンツ</p> </article> <footer data-role="footer" data-id="footer" data-position="fixed"> <h4>フッタ</h4> </footer> </section> <section id="page2" data-role="page"> <header data-role="header" data-id="header" data-position="fixed" data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="d"> <h4>ヘッダ</h4> </header> <article data-role="content"> <p>２ページ目のコンテンツ</p> </article> <footer data-role="footer" data-id="footer" data-position="fixed"> <h4>フッタ</h4> </footer> </section> </body> </html> |