感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

ヘッダーを表示してみる

<スポンサーリンク>

■スウォッチの指定方法
スウォッチはカラーバリエーションを定義するときに使います。
スウォッチを指定するには、「data-theme」というカスタムデータ属性を用います。
a~eの5つが標準で用意されています。

<div data-role="page" data-theme="d">
  aaa
</div>


■ヘッダーを表示する
ヘッダーを作るひな形は以下のとおりです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width, initial-scale=1">
	<title>jQuery Mobile Example</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <script src="js/simple-tooltip/js/tips.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="1">
  <!-- ヘッダーを作ります -->
  <div data-role="header">
    <h1>これはヘッダーだよ!</h1>
  </div>
</div>
</body>
</html>

f:id:sho322:20140626011650j:plain


■ヘッダーの両端にボタンをつけるには、以下のように書きます■


許可系のボタンは右側、禁止系のボタンは左側に設置するのがiOSの作法です。
AndroidやWindowsでは、許可系は左側、禁止ボタンは右側に設置するのが作法です。

Macだと、ブラウザ閉じるのは左側にあるもんね。
Windowsは右。

<!-- ヘッダーを作ります -->
<div data-role="header">
  <a href="#1" data-icon="delete">削除</a>
<h1>これはヘッダーだよ!</h1>
<a href="#2" data-icon="check">チェック</a>
</div>

f:id:sho322:20140626011700j:plain


■ヘッダーに戻るボタンをつけてみます

サンプルは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divice-width, initial-scale=1">
	<title>jQuery Mobile Example</title>
	<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <script src="js/simple-tooltip/js/tips.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="one">
  <!-- ヘッダーを作ります -->
  <div data-role="header">
    <h1>1ページ目</h1>
    <a href="#two" data-icon="arrow-r" class="ui-btn-right">2ページ目へ</a>
  </div>
</div>

<div data-role="page" id="two" data-add-back-btn="true" data-back-btn-text="戻る">
  <div data-role="header">
    <h2>2ページ目</h2>
    <a href="#one" data-icon="arrow-l" data-rel="back" data-role="button">戻る</a>
  </div>
</div>
</body>
</html>

iPhoneでは以下のように表示されます。

f:id:sho322:20140626011336j:plain
f:id:sho322:20140626011353j:plain

<参考>

ノン・プログラマのためのjQuery Mobile標準ガイドブック

ノン・プログラマのためのjQuery Mobile標準ガイドブック