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-属性の使用例その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> |
関連記事
-
-
コンテンツをフルスクリーンで表示する
ヘッダ、フッタにdata-position="fixed"とdata-fullscreen="tru
-
-
移動しないヘッダ、フッタにIDを設定する
MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid
-
-
ページのURLを設定する
ユーザーにページのURLを知らせる時に使用するのがdata-url属性です。 data-url属性
-
-
class属性によりレイアウトとテーマを設定する
ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS
-
-
値を選択するボタンを表示する
値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ
-
-
トグルスイッチを設定する
トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち
-
-
ポップアップを表示する
ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェ
-
-
jQueryMobileとフォームを組み合わせてみる
フォーム(user-submittable form)は、HTMLタグでは<form>タ
-
-
jQueryMobileカテゴリーで出てくる用語集
jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。
- PREV
- data-属性によるウィジェットの設定
- NEXT
- コンテンツをフルスクリーンで表示する