ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="true"を設定すると、表示されるコンテンツの周囲に余白が全くないフルスクリーンで表示されます。これは動画、画像など画面全体で楽しむコンテンツを表示するときに使用します。このとき設定で追加されたヘッダ、フッタはCSSでopacity:0.9に設定されるので、背景ページが少し透過して見えます。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile data-属性でコンテンツをフルスクリーンで表示する</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="１ページ目"> <header data-role="header" data-position="fixed" data-fullscreen="true"> <h4>１ページ目</h4> </header> <article data-role="content"> <p> data-positoin属性を使ったヘッダとフッタの表示テストです。 headerとfooterタグ内にdata-position="fixed"とそれぞれ 指定することで、スマホの画面の上部にヘッダ、下部にフッタを 常に表示されることができます。 </p> <p><img src="../img/catejQueryMobile.png"></p> <p> コンテンツをフルスクリーンで表示します。 header,footerに data-fullscreen="true"を指定します。 </p> </article> <footer data-role="footer" data-position="fixed" data-fullscreen="true"> <h4>１ページ目</h4> </footer> </section> </body> </html> |