リストビュー - listview
①基本リストビュー
☆ソース
<ul data-role="listview">
<li>
<a>みかん</a>
</li>
<li>
<a>りんご</a>
</li>
<li>
<a>バナナ</a>
</li>
</ul>
※ul⇒olに置換することで、先頭に番号が自動で割り振られます。
デモ
デモ
②リンク付きリストビュー
☆ソース
<ul data-role="listview">
<li>
<a href="リンク先URL">リンク1</a>
</li>
<li>
<a href="リンク先URL">リンク2</a>
</li>
<li>
<a href="リンク先URL">リンク3</a>
</li>
</ul>
デモ
③階層付きリストビュー
☆ソース
<ul data-role="listview">
<li>
<a>1番目</a>
<ul>
<li><a>1-1番目</a></li>
<li><a>1-2番目</a></li>
</ul>
</li>
<li><a>2番目</a>
<ul>
<li><a>2-1番目</a></li>
<li><a>2-2番目</a></li>
</ul>
</li>
</ul>
※同じ形で、何階層も深く作ることが可能です。
デモ
デモ
④分割リストビュー
☆ソース
<ul data-role="listview" >
<li>
<a href="リンク先URL">1</a>
<a href="リンク先URL">1の右</a>
</li>
<li>
<a href="リンク先URL">2</a>
<a href="リンク先URL">2の右</a>
</li>
</ul>
※それぞれ別のリンクを割り振ることが可能です。
デモ
デモ
⑤タイトル付きリストビュー
☆ソース
<ul data-role="listview" >
<li data-role="list-divider">タイトル1</li>
<li><a href="リンク先URL">1</a></li>
<li data-role="list-divider">タイトル2</li>
<li><a href="リンク先URL">2</a></li>
<li><a href="リンク先URL">3</a></li>
</ul>
デモ
⑥検索リストビュー
☆ソース
<ul data-role="listview" data-filter="true">
<li><a>あじあ</a></li>
<li><a>あしゅら</a></li>
<li><a>あきば</a></li>
<li><a>いくら</a></li>
<li><a>いくらですか？</a></li>
<li><a>うきわ</a></li>
<li><a>うきうき</a></li>
<li><a>えーりん</a></li>
<li><a>える</a></li>
<li><a>おにぎり</a></li>
<li><a>おによめ</a></li>
<li><a>おとめ</a></li>
<li><a>asia</a></li>
<li><a>area</a></li>
<li><a>beep</a></li>
<li><a>best</a></li>
<li><a>漢字</a></li>
</ul>
※検索ボックスに「あ」と入力してみてください。自動で絞り込みをしてくれます。
デモ
デモ