data-属性により、ヘッダとフッタを常時表示する

公開日： 2016/04/25 : 最終更新日：2016/04/25 jQueryMobile data-属性

前回の記事の続きです。

ヘッダとフッタを常時表示

ページのヘッダとフッタにdata-position=”fixed”を書くと、ページの縦の長さが画面より大きく、その画面をスクロールさせた後でも、常に画面の上部にヘッダ、下部にフッタを表示します。これを設定することにより、ユーザーはメニュー操作をいつでもすることができます。また、画面をクリック、タップすることでヘッダとフッタは表示と消去を交互に繰り返すことができます。

サンプルコードを実行すると確認できますが、ページを画面に表示した直後はヘッダ、フッタ両方とも表示されます。これらは画面をスクロールさせても同じ位置に表示されていますが、画面をタップかクリックすると消去されます。その後、また画面をタップかクリックすると、ヘッダとフッタが表示されます。コンテンツによっては画面の周囲に余白ができることがあります。

サンプルコードの実行結果はこちら

<!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>

<!DOCTYPE html>

<head>

<title>jQueryMobile data-属性の使用例その２</title>

</head>

<body>

</header>

<p>

data-positoin属性を使ったヘッダとフッタの表示テストです。

headerとfooterタグ内にdata-position="fixed"とそれぞれ

指定することで、スマホの画面の上部にヘッダ、下部にフッタを

常に表示されることができます。

</p>

</article>

</footer>

</section>

</body>

</html>

スポンサードリンク

Message コメントをキャンセル

PREV: data-属性によるウィジェットの設定
NEXT: コンテンツをフルスクリーンで表示する

data-属性により、ヘッダとフッタを常時表示する

ヘッダとフッタを常時表示

関連記事

コンテンツをフルスクリーンで表示する

移動しないヘッダ、フッタにIDを設定する

ページのURLを設定する

class属性によりレイアウトとテーマを設定する

値を選択するボタンを表示する

トグルスイッチを設定する

ダイアログ

ポップアップを表示する

jQueryMobileとフォームを組み合わせてみる

jQueryMobileカテゴリーで出てくる用語集

Message コメントをキャンセル

NEW ENTRY

参加中のランキング

最近の投稿

最近のコメント

アーカイブ

カテゴリー

タグ

data-属性により、ヘッダとフッタを常時表示する

コーディング関連の情報をお届けします。