data-属性により、ヘッダとフッタを常時表示する
公開日：
:
最終更新日：2016/04/25
jQueryMobile data-属性
前回の記事の続きです。
ヘッダとフッタを常時表示
ページのヘッダとフッタに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-属性の使用例その２</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"> <h4>１ページ目</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>１ページ目</h4> </footer> </section> </body> </html> |
関連記事
-
-
ページ(page)とは
jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構
-
-
移動しないヘッダ、フッタにIDを設定する
MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid
-
-
アイコンとサムネイルを表示する
各項目のレイアウトを設定する <li>の中には、色々なレイアウトを設定できます。いずれ
-
-
ボタン内にアイコンを表示したり、デザインを変更する
ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo
-
-
jQueryMobileとフォームを組み合わせてみる
フォーム(user-submittable form)は、HTMLタグでは<form>タ
-
-
同じHTML文書に複数ページを作成してみる
jQueryMobileでは、同じHTML文書内に複数ページを作成することができます。手順は以下の通
-
-
リンク先を設定したり、アイコンを利用する。
リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ
- PREV
- data-属性によるウィジェットの設定
- NEXT
- コンテンツをフルスクリーンで表示する
