リストを使いこなそう (2/5)

<ul><li>によるリストの表示は、使い方によってはかなり高度なことが可能です。まずは「階層リスト」についてです。

リストは、リストの中に更にリストを組み込み、階層化することができます。ごく簡単な例を下のリスト欄にあげておきました。実際にアクセスして表示を確認してみましょう。まず２項目のリストが現れ、選択するとその項目内のサブリストが現れます。

このサンプルでは、ざっと以下のような構造をしていることがわかるでしょう。

<ul data-role="listview">
    <li>項目その１
        <ul data-role="listview">
            <li>サブ項目その１</li>
            ……略……
        </ul>
    </li>
    ……略……
</ul>

項目である<li>タグの中に、更に<ul>タグを使ってリストを作成しているわけですね。このように階層化されたリストを表示させると、ちょっと意外が動作をします。アクセスしたときには、サブリスト（内部にあるリスト）は表示されず、外側のリストの項目名だけが表示されるのです。そしてその項目を選択すると、その項目のサブリストに表示が切り替わります。

下に挙げた例では、まず「英語」「独語」という項目だけが表示され、「英語」をクリックすると、新たに「One」「Two」「Three」という項目のリストが表示される、というわけです。

注目すべきは、リストからサブリストへの表示切替には、<a>タグなどのリンクは一切用意していない、という点でしょう。ただ普通に<ul><li>タグでリストを書くだけで、階層化されていれば自動的に「メインのリストからサブリストへ」という表示切替リンクが生成されるのですね。

（※なお、1.0b2では、ネストされたリストを移動した際、「Back」ボタンは自動表示されなくなったようです）

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※階層化リスト
<!-- home page -->
<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
		<p>※リスト表示のサンプル。</p>
		<ul data-role="listview">
			<li>英語
				<ul data-role="listview">
					<li>One</li>
					<li>Two</li>
					<li>Three</li>
				</ul>
			</li>
			<li>独語
				<ul data-role="listview">
					<li>Eine</li>
					<li>Twei</li>
					<li>Drai</li>
				</ul>
			</li>
		</ul>
	</div>
</div>