戻る

リスト

このサイトの仕様上、部品は目的の動作と異なることがあるので、ソースを活用してください。

リストをインセットモードにする

<ul data-role="listview" data-inset="true">
	<li><a href="/1">リンク1</a></li>
	<li><a href="/2">リンク2</a></li>
	<li><a href="/3">リンク3</a></li>
	<li><a href="/4">リンク4</a></li>
	<li><a href="/5">リンク5</a></li>
</ul>

リストを階層化する

  • アイテム1
    • アイテム1-1
    • アイテム1-2
    • アイテム1-3
  • アイテム2
    • アイテム2-1
    • アイテム2-2
    • アイテム2-3
    • アイテム2-4
<ul data-role="listview">
	<li>アイテム1
		<ul>
			<li>アイテム1-1</li>
			<li>アイテム1-2</li>
			<li>アイテム1-3</li>
		</ul>
	</li>
	<li>アイテム2
		<ul>
			<li>アイテム2-1</li>
			<li>アイテム2-2</li>
			<li>アイテム2-3</li>
			<li>アイテム2-4</li>
		</ul>
	</li>
</ul>

項番付きリストを作る

  1. リンク1
  2. リンク2
  3. リンク3
  4. リンク4
  5. リンク5
<ol data-role="listview">
	<li><a href="/1">リンク1</a></li>
	<li><a href="/2">リンク2</a></li>
	<li><a href="/3">リンク3</a></li>
	<li><a href="/4">リンク4</a></li>
	<li><a href="/5">リンク5</a></li>
</ol>

リンクリストを作る

<ul data-role="listview">
	<li><a href="/1">リンク1</a></li>
	<li><a href="/2">リンク2</a></li>
	<li><a href="/3">リンク3</a></li>
	<li><a href="/4">リンク4</a></li>
	<li><a href="/5">リンク5</a></li>
</ul>

リンクリストのアイコンを変える

<ul data-role="listview">
	<li data-icon="home"><a href="/">ホーム</a></li>
	<li data-icon="gear"><a href="/">設定</a></li>
	<li data-icon="false"><a href="/">アイコン無し</a></li>
</ul>

リンクリストにサブリンクを持たせる

<ul data-role="listview">
	<li><a href="/1">リンク1</a><a href="/1-conf">設定</a></li>
	<li><a href="/2">リンク2</a><a href="/2-conf">設定</a></li>
	<li><a href="/3">リンク3</a><a href="/3-conf">設定</a></li>
	<li><a href="/4">リンク4</a><a href="/4-conf">設定</a></li>
	<li><a href="/5">リンク5</a><a href="/5-conf">設定</a></li>
</ul>

サブリンクのアイコンやテーマを変える

<ul data-role="listview" data-split-icon="gear" data-split-theme="b">
	<li><a href="/1">リンク1</a><a href="/1-conf">設定</a></li>
	<li><a href="/2">リンク2</a><a href="/2-conf">設定</a></li>
	<li><a href="/3">リンク3</a><a href="/3-conf">設定</a></li>
	<li><a href="/4">リンク4</a><a href="/4-conf">設定</a></li>
	<li><a href="/5">リンク5</a><a href="/5-conf" data-theme="c" data-icon="home">ホーム</a></li>
</ul>

リストにディバイダを入れる

<ul data-role="listview">
	<li data-role="list-divider">グループA</li>
	<li><a href="/1">リンク1</a></li>
	<li><a href="/2">リンク2</a></li>
	<li><a href="/3">リンク3</a></li>
	<li data-role="list-divider">グループB</li>
	<li><a href="/4">リンク4</a></li>
	<li><a href="/5">リンク5</a></li>
	<li data-role="list-divider">グループC</li>
	<li><a href="/5">リンク6</a></li>
	<li><a href="/5">リンク7</a></li>
	<li><a href="/5">リンク8</a></li>
	<li><a href="/5">リンク9</a></li>
</ul>

ディバイダのテーマを変える

<ul data-role="listview" data-divider-theme="a">
	<li data-role="list-divider">グループA</li>
	<li><a href="/1">リンク1</a></li>
	<li><a href="/2">リンク2</a></li>
	<li><a href="/3">リンク3</a></li>
	<li data-role="list-divider">グループB</li>
	<li><a href="/4">リンク4</a></li>
	<li><a href="/5">リンク5</a></li>
	<li data-role="list-divider">グループC</li>
	<li><a href="/5">リンク6</a></li>
	<li><a href="/5">リンク7</a></li>
	<li><a href="/5">リンク8</a></li>
	<li><a href="/5">リンク9</a></li>
</ul>

リストに個数を表示する

<ul data-role="listview">
	<li><a href="/inbox">受信トレイ<span class="ui-li-count">203</span></a></li>
	<li><a href="/sent">送信済み</a></li>
	<li><a href="/drafts">下書き<span class="ui-li-count">1</span></a></li>
	<li><a href="/trash">ゴミ箱</a></li>
</ul>

個数表示のテーマを変える

<ul data-role="listview" data-count-theme="a">
	<li><a href="/inbox">受信トレイ<span class="ui-li-count">203</span></a></li>
	<li><a href="/sent">送信済み</a></li>
	<li><a href="/drafts">下書き<span class="ui-li-count">1</span></a></li>
	<li><a href="/trash">ゴミ箱</a></li>
</ul>

リストにサムネイル画像を表示する

<ul data-role="listview">
	<li><a href="/imgs/201111/"><img src="img/image1.png" width="80" height="80">2011年11月</a></li>
	<li><a href="/imgs/201110/"><img src="img/image2.png" width="80" height="80">2011年10月</a></li>
	<li><a href="/imgs/201109/"><img src="img/image3.png" width="80" height="80">2011年09月</a></li>
</ul>

リストにアイコンを表示する

<ul data-role="listview">
	<li><a href="/imgs/201111/"><img src="img/image1.png" width="16" height="16" class="ui-li-icon">Twitter</a></li>
	<li><a href="/imgs/201110/"><img src="img/image2.png" width="16" height="16" class="ui-li-icon">Facebook</a></li>
	<li><a href="/imgs/201109/"><img src="img/image3.png" width="16" height="16" class="ui-li-icon">Google Buzz</a></li>
</ul>

リスト内にヘッダを入れる

  • スーパーラグビー

    ニュージーランド、オーストラリア、南アフリカ共和国

    南半球最強クラブチーム決定戦。世界最高峰のアタッキング・ラグビーが堪能できる。

  • トップ14

    フランス

    フランス国内のリーグながら、世界中からトップ選手の集まる人気の大会。

  • ジャパン トップリーグ

    日本

    日本における社会人ラグビーの全国リーグ。近年、海外からトップ選手の参戦も相次ぎ、そのレベルをあげてきている。

<ul data-role="listview">
	<li>
		<h4>スーパーラグビー</h4>
		<p><strong>ニュージーランド、オーストラリア、南アフリカ共和国</strong></p>
		<p>南半球最強クラブチーム決定戦。世界最高峰のアタッキング・ラグビーが堪能できる。</p>
	</li>
	<li>
		<h4>トップ14</h4>
		<p><strong>フランス</strong></p>
		<p>フランス国内のリーグながら、世界中からトップ選手の集まる人気の大会。</p>
	</li>
	<li>
		<h4>ジャパン トップリーグ</h4>
		<p><strong>日本</strong></p>
		<p>日本における社会人ラグビーの全国リーグ。近年、海外からトップ選手の参戦も相次ぎ、そのレベルをあげてきている。</p>
	</li>
</ul>

リストに付加情報を付ける

  • スーパーラグビー

    南半球最強クラブチーム決定戦。世界最高峰のアタッキング・ラグビーが堪能できる。

    ニュージーランド、オーストラリア、南アフリカ共和国

  • トップ14

    フランス国内のリーグながら、世界中からトップ選手の集まる人気の大会。

    フランス

  • ジャパン トップリーグ

    日本における社会人ラグビーの全国リーグ。近年、海外からトップ選手の参戦も相次ぎ、そのレベルをあげてきている。

    日本

<ul data-role="listview">
	<li>
		<h4>スーパーラグビー</h4>
		<p>南半球最強クラブチーム決定戦。世界最高峰のアタッキング・ラグビーが堪能できる。</p>
		<p class="ui-li-aside">ニュージーランド、オーストラリア、南アフリカ共和国</p>
	</li>
	<li>
		<h4>トップ14</h4>
		<p>フランス国内のリーグながら、世界中からトップ選手の集まる人気の大会。</p>
		<p class="ui-li-aside">フランス</p>
	</li>
	<li>
		<h4>ジャパン トップリーグ</h4>
		<p>日本における社会人ラグビーの全国リーグ。近年、海外からトップ選手の参戦も相次ぎ、そのレベルをあげてきている。</p>
		<p class="ui-li-aside">日本</p>
	</li>
</ul>

リストにフィルタ機能を付ける

<ul data-role="listview" data-filter="true">
	<li><a href="/p/Aaron_Bancroft/">Aaron Bancroft</a></li>
	<li><a href="/p/Aaron_Broughton-Rouse/">Aaron Broughton-Rouse</a></li>
	<li><a href="/p/Aaron_Cruden/">Aaron Cruden</a></li>
	<li><a href="/p/Zinzan_Brooke/">Zinzan Brooke</a></li>
</ul>

プレースホルダ―の文字列を変更する（１）―マークアップ

<ul data-role="listview" data-filter="true" data-filter-placeholder="選手名で検索">
	<li><a href="/p/Aaron_Bancroft/">Aaron Bancroft</a></li>
	<li><a href="/p/Aaron_Broughton-Rouse/">Aaron Broughton-Rouse</a></li>
	<li><a href="/p/Aaron_Cruden/">Aaron Cruden</a></li>
	<li><a href="/p/Zinzan_Brooke/">Zinzan Brooke</a></li>
</ul>

プレースホルダ―の文字列を変更する（２）―スクリプト

$(document).bind("mobileinit",function(){
	$.mobile.listview.prototype.options.filterPlaceholder = "絞り込み";
});

フィルタのテーマを変更する

<ul data-role="listview" data-filter="true" data-filter-theme="a">
	<li><a href="/p/Aaron_Bancroft/">Aaron Bancroft</a></li>
	<li><a href="/p/Aaron_Broughton-Rouse/">Aaron Broughton-Rouse</a></li>
	<li><a href="/p/Aaron_Cruden/">Aaron Cruden</a></li>
	<li><a href="/p/Zinzan_Brooke/">Zinzan Brooke</a></li>
</ul>

フィルタに独自のマッチングルールを作る

<ul id="players-list" data-role="listview" data-filter="true">
	<li><a href="/p/Aaron_Bancroft/">Aaron Bancroft</a></li>
	<li><a href="/p/Aaron_Broughton-Rouse/">Aaron Broughton-Rouse</a></li>
	<li><a href="/p/Aaron_Cruden/">Aaron Cruden</a></li>
	<li><a href="/p/Zinzan_Brooke/">Zinzan Brooke</a></li>
</ul>

$("#players-list").listview("option","filterCallback",function(text,v){
	var t = " " + text.toLowerCase();
	return t.indexOf(" " + v) === -1;
});

ディバイダ付きのリストにフィルタを付ける

<ul data-role="listview" data-filter="true">
	<li data-role="list-divider">A</li>
	<li><a href="/p/Aaron_Bancroft/">Aaron Bancroft</a></li>
	<li><a href="/p/Aaron_Broughton-Rouse">Aaron Broughton-Rouse</a></li>
	<li><a href="/p/Aaron_Cruden/">Aaron Cruden</a></li>
	<li data-role="list-divider">グループZ</li>
	<li><a href="/p/Zinzan_Rooke/">Zinzan Brooke</a></li>
</ul>
inserted by FC2 system