プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

ヘッダー・フッター

デモ

こちらをデモを参照


サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>jQuery Mobileサンプル</title>
		<link rel="stylesheet" href="../css/jquery.mobile-1.1.1.css" />
		<script src="../js/jquery-1.8.1.min.js"></script>
		<script src="../js/jquery.mobile-1.1.1.min.js"></script>
	</head>
	<body>
		<section id="index" data-role="page" data-title="jQuery Mobile">
			<header data-role="header">
				<h1>jQuery Mobileサンプル</h1>
			</header>
			<div id ="index_content" data-role="content"> 
				<p>jQuery Mobileサンプル</p>
				<p>
					<a href="#form" data-role="button">jQuery Mobile フォームサンプル</a>
					<a href="#list" data-role="button">jQuery Mobile リストサンプル</a>
				</p>
			</div>
			<footer data-role="footer">
				サンプルソーステスト
			</footer>
		</section>
 
		<section id="form" data-role="page" data-title="jQuery Mobile フォームサンプル"
			data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="b">
			<header data-role="header">
				<h1>jQuery Mobile フォーム</h1>
			</header>
			<div id ="form_content" data-role="content"> 
				フォーム関連のリファレンスサンプル
			</div>
			<footer data-role="footer">
				サンプルソーステスト
			</footer>
		</section>
 
		<section id="list" data-role="page" data-title="jQuery Mobile リストサンプル"
			data-add-back-btn="true" data-back-btn-text="戻る" data-back-btn-theme="b">
			<header data-role="header">
				<h1>jQuery Mobile リスト</h1>
			</header>
			<div id ="list_content" data-role="content"> 
				リスト関連のリファレンスサンプル
			</div>
			<footer data-role="footer">
				サンプルソーステスト
			</footer>
		</section>
	</body>
</html>
 
 



「ヘッダー領域に「戻る」ボタンを配置」をウィキ内検索
最終更新：2013年05月23日 19:38