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

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

jQuery Mobileでグループ化したリストビューを作成したり、ページの先頭へ戻るボタンを設置する方法。

<スポンサーリンク>

jQuery Mobileでリストビューを作成する。

jQuery Mobileで、スマホによくあるリストを作成する方法は以下の通り。

<div data-role="top" id="top">
	<div data-role="listview">
		<li>トリコ</li>
		<li>NARUTO</li>
		<li>黒子のバスケ</li>
	</div>
</div>

リストの項目をグループ化するのは、

<li data-role="list-divider">ジャンプの注目マンガ</li>

のようにdata-role="list-divider"を使う。
リストビューの角を丸くしたい時はdata-inset="true"属性を追加する。
こんな感じ。

<div data-role="listview" data-inset="true">
	<li data-role="list-divider">ジャンプの注目マンガ</li>
	<li>トリコ</li>
	<li>NARUTO</li>
	<li>黒子のバスケ</li>
</div>

jQuery Mobileで「戻る」ボタンを追加する

<div data-role="page" id="info" data-add-back-btn="true" data-back-btn-text="戻る">

こんな感じで、ページグループにdata-add-back-btn="true" data-back-btn-text="文言"を加える。

jQuery Mobileでページの先頭へ戻る。

以下を追加すればいい。

<a onClick="$.mobile.silentScroll(0);" data-role="button">ページの先頭へ</a>