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

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

jQuery Mobileでリストビューを折りたたんだり開いたりする。リストのアイコンを矢印にする。

<スポンサーリンク>

jQuery Mobileでリストビューを折りたたむ方法

例えばお菓子のメニューを作る時。

  • ケーキ
    • チーズケーキ
    • ショートケーキ
    • レーズンケーキ
  • クッキー

みたいな感じで、項目ごとにリストにして、クリックで開くようにしたいとする。
画面イメージはこんな感じ。↓

こういうのは、jQuery Mobileでは以下のように実装する。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>マルチページのてすと</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div data-role="page" id="top">
	<div data-role="header">
		<h1>お菓子のメニュー</h1>
	</div>

	<div data-role="collapsible" data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d">
		<h2>ケーキ</h2>
		<ul data-role="listview">
			<li><a href="#cheesecake">チーズケーキ</a></li>
			<li><a href="#shortcake">ショートケーキ</a></li>
			<li><a href="#rezuncake">レーズンケーキ</a></li>
		</ul>
	</div>
	<div data-role="collapsible" data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d">
		<h2>クッキー</h2>
		<ul data-role="listview">
			<li><a href="#bitter">ビタークッキー</a></li>
			<li><a href="#love">ラブクッキー</a></li>
			<li><a href="#cookieclicker">クッキークリッカー</a></li>
		</ul>
	</div>
</div>
</body>
</html>

「data-collapsed-icon="arrow-r" and data-expanded-icon="arrow-d"」のところは、折りたたんだり開いたときのアイコンの種類を指定する。

読んだ本

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

かんたん7ステップ きほんからわかる jQuery Mobileコーディング

感謝のプログラミング

今回で感謝のプログラミングは【653時間目】
10000時間まで、あと【9347時間】