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

階層リストは、便利ではありますが、いちいち表示が切り替わるのがややうるさい感じはします。それほど項目が多くないのであれば、サブリストを作るのでなく、「リストをいくつかに分けて整理する」という方法もあります。

下のリスト欄に、その例をあげてあります。この例では、１つのリスト内に「英語」「独語」というタイトルが表示され、その下にそれぞれの項目が表示されています。この「英語」「独語」は、「仕切り線」となる項目です。リストを見ると、

<li data-role="list-divider">英語</li>

このように記述されていることがわかるでしょう。data-role="list-divider"という属性を追加すると、その項目はリストを切り分けるための項目として扱われるようになります。これを利用して、関連する項目ごとに切り分けて表示すれば、いくつかのリストを１つにまとめることもできます。

ここではリンクなどは用意していませんが、この仕切り線となる項目にも<a>タグのリンクを用意することはできます。ただし、そうすると表示は他の項目とあまり大きな違いはなくなってしまいます。

data-role="list-divider"は、あくまで項目を分類するための仕切りですから、「<a>タグのリンクなどを中に用意しないのが基本」と考えたほうが良いでしょう。

(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 data-role="list-divider">英語</li>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
			<li data-role="list-divider">独語</li>
			<li>Eine</li>
			<li>Twei</li>
			<li>Drai</li>
		</ul>
	</div>
</div>