前回の記事の続きです。
ヘッダとフッタを常時表示
ページのヘッダとフッタに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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile data-属性の使用例その2</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" data-title="1ページ目"> <header data-role="header" data-position="fixed"> <h4>1ページ目</h4> </header> <article data-role="content"> <p> data-positoin属性を使ったヘッダとフッタの表示テストです。 headerとfooterタグ内にdata-position="fixed"とそれぞれ 指定することで、スマホの画面の上部にヘッダ、下部にフッタを 常に表示されることができます。 </p> <p><img src="../img/catejQueryMobile.png"></p> </article> <footer data-role="footer" data-position="fixed"> <h4>1ページ目</h4> </footer> </section> </body> </html> |