リストビュー - 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>   デモ
  • タイトル1
  • 1
  • タイトル2
  • 2
  • 3


 ⑥検索リストビュー  ☆ソース <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>     ※検索ボックスに「あ」と入力してみてください。自動で絞り込みをしてくれます。


  デモ