リストの表示

スマートフォンサイトで多用されるのが、リスト表示です
jQuery Mobileではさまざまなリスト表示のUIが用意されています

一般的なリスト　data-role属性「listview」

ul、ol/li要素などのリストでマークアップされた項目にdata-role属性「listview」を追加すると、スマートフォンに最適化されたリストとして表示されます

<body>
<div data-role="page" id="index"> 
<div data-role="header"><h1>ヘッダー</h1></div> 
<div data-role="content">
<ul data-role="listview">
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div> 
<div data-role="footer"><h4>フッター</h4></div> 
</div>
</body>

リスト内の項目がa要素で包まれている場合は、右端に矢印が付いたリンクリストとして表示されます

<body>
<div data-role="page" id="index"> 
<div data-role="header"><h1>ヘッダー</h1></div> 
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
<li><a href="#page2">list</a></li>
</ul>
</div> 
<div data-role="footer"><h4>フッター</h4></div> 
</div>
</body>

sample03

入れ子状態のリストでは、最初にメイン（親）のリストが表示され、リストをタップするとページが遷移して子リストが表示されます

<body>
<div data-role="page" id="index"> 
<div data-role="header"><h1>ヘッダー</h1></div> 
<div data-role="content">
<ul data-role="listview">
<li>list
<ul>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list2</a></li>
</ul>
</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</u>
</div> 
<div data-role="footer"><h4>フッター</h4></div> 
</div>
</body>

ここまでをまとめると、

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8">
<title>jQuery Mobile Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head> 
<body>
<div data-role="page" id="index"> 
<div data-role="header"><h1>ヘッダー</h1></div> 
<div data-role="content">
<ul data-role="listview">
<li>list
<ul>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list2</a></li>
<li><a href="#page2">list2</a></li>
</ul>
</li>
<li>list</li>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div> 
<div data-role="footer"><h4>フッター</h4></div> 
</div>
<div data-role="page" id="page2"> 
<div data-role="header"><h1>ページ2</h1></div>
<div data-role="content">コンテンツ2</div>
<div data-role="footer"><h4>フッター2</h4></div>
</div>
</body>
</html>

sample04

分割リスト

li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できます

<ul data-role="listview">
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
  <li><a href="#page2">list</a><a href="#page2">detail</a></li>
</ul>

sample05

分割リストでは、2番目のリンクはリンクアイコンだけが表示されます

分割リストのアイコンを設定　data-split-icon属性

分割リストで表示するアイコンは、data-split-icon属性で変更できます
たとえば、「gear」を設定すると歯車のようなアイコンになります

<ul data-role="listview" data-split-icon="gear">

分割リストのテーマを設定　data-split-them属性

分割リストではdata-split-them属性を利用してテーマを適用できます
分割リストのリンクアイコンは、デフォルトではテーマ「b」が適用されていますが、data-split-themeでページのデザインに合ったテーマを適用できます

<ul data-role="listview" data-split-theme="a">

角丸のリスト　data-inset属性「true」

ul/ol要素に対してdata-inset属性「true」を付けると、角丸の立体的なリストにできます

<ul data-role="listview" data-inset="true">

sample06

説明付きのリスト

<ul data-role="listview">
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
   <li><a href="#page2"><h1>見出し</h1><p>説明の内容</p></a></li>
</ul>

sample07

class属性「ui-li-aside」を設定した要素を記述すると、リスト項目の右上に補足的な情報も表示できます。

<ul data-role="listview">
    <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
    <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
    <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
    <li><a href="#page2"><p class="ui-li-aside">2012年2月11日</p><h1>見出し</h1><p>説明の内容</p></a></li>
  </ul>

sample08

リストに見出しを設定　data-role属性「list-divider」

リスト内のli要素にdata-role属性「list-divider」を追加すると、その項目は見出し項目として扱われます

<ul data-role="listview">
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li data-role="list-divider">見出し</li>   
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul>

sample09

見出しのテーマを変更する　data-dividertheme属性

ul要素やol要素に対してdata-dividertheme属性を設定すると、見出しのテーマを変更できます。デフォルトでは「b」のテーマが適用されています

<ul data-role="listview" data-dividertheme="a">
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
   <li data-role="list-divider">見出し</li>
   <li><a href="#page2">list</a></li>
   <li><a href="#page2">list</a></li>
</ul>

sample10

カウントバブルの追加　class属性「ui-li-count」

リスト内に数値を記述し、class属性「ui-li-count」を付けた要素で包むと、リスト項目の右側にカウントバブルが表示されます
Webサイトの新着情報の件数を表示する場合などに利用できます

<ul data-role="listview">
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
</ul>

sample11

カウントバブルのテーマの変更　data-count-theme属性

カウントバブルのデザインテーマは、data-count-theme属性で変更できます

<ul data-role="listview" data-count-theme="a">
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
   <li><a href="#page2">list<span class="ui-li-count">10</span></a></li>
</ul>

sample12

画像付きのリスト

各リスト項目内のimg要素を記述すると、左側に画像が表示される画像付きリストを利用できます
img要素で指定した画像は80×80pxに自動的にリサイズされます

<ul data-role="listview">
   <li><a href="#page2"><img src="thumbnail1.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail2.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail3.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail4.jpg">list</a></li>
   <li><a href="#page2"><img src="thumbnail5.jpg">list</a></li>
</ul>

sample13

より小さな画像をアイコンのようにして表示したい場合は、class属性「ui-li-icon」を使います
画像が16×16pxで表示されます

<ul data-role="listview">
   <li><a href="#page2"><img src="thumbnail1.jpg" class="ui-li-icon">list</a></li>
   <li><a href="#page2"><img src="thumbnail2.jpg" class="ui-li-icon">list</a></li>
   <li><a href="#page2"><img src="thumbnail3.jpg" class="ui-li-icon">list</a></li>
   <li><a href="#page2"><img src="thumbnail4.jpg" class="ui-li-icon">list</a></li>
   <li><a href="#page2"><img src="thumbnail5.jpg" class="ui-li-icon">list</a></li>
</ul>

ただし、jQuery Mobileの現在のバージョン（1.0ベータ）では画像が40×40pxにリサイズされ、表示がずれてしまいます
現状ではCSSでサイズを指定することで問題を回避できます

sample14

Webサイト制作科 - 作品紹介

Webサイト制作科 - 作品紹介

リストの表示

リストの表示

一般的なリスト　data-role属性「listview」

分割リスト

分割リストのアイコンを設定　data-split-icon属性

分割リストのテーマを設定　data-split-them属性

角丸のリスト　data-inset属性「true」

説明付きのリスト

リストに見出しを設定　data-role属性「list-divider」

見出しのテーマを変更する　data-dividertheme属性

カウントバブルの追加　class属性「ui-li-count」

カウントバブルのテーマの変更　data-count-theme属性

画像付きのリスト

リストの表示

一般的なリスト data-role属性「listview」

分割リスト

分割リストのアイコンを設定 data-split-icon属性

分割リストのテーマを設定 data-split-them属性

角丸のリスト data-inset属性「true」

説明付きのリスト

リストに見出しを設定 data-role属性「list-divider」

見出しのテーマを変更する data-dividertheme属性

カウントバブルの追加 class属性「ui-li-count」

カウントバブルのテーマの変更 data-count-theme属性

画像付きのリスト

一般的なリスト　data-role属性「listview」

分割リストのアイコンを設定　data-split-icon属性

分割リストのテーマを設定　data-split-them属性

角丸のリスト　data-inset属性「true」

リストに見出しを設定　data-role属性「list-divider」

見出しのテーマを変更する　data-dividertheme属性

カウントバブルの追加　class属性「ui-li-count」

カウントバブルのテーマの変更　data-count-theme属性