jQuery Mobile コンポーネントシリーズ #6 「開閉式とアコーディオン式コンテンツ」

特集

野中 龍一

2012.02.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回#5では「ボタン」について紹介しました。

jQuery Mobileの開閉式コンポーネントには2つの種類があります。今回は「開閉式とアコーディオン式コンテンツ」について紹介します。

開閉式コンテンツ

開閉式のコンテンツを作成するには、コンテナとなる要素に対して「data-role=“collapsible”」を指定します。入れ子にすることもできます。

サンプルソース

<div data-role="collapsible">
	<h2 id="toc-1">開閉</h2>
	<p>この部分には内容が入ります。</p>
</div>

読み込み時の開閉状態を制御する

読み込み時にコンテンツが開いた状態にしておきたい場合「data-collapsed="false"」をコンテナとなる要素に指定します。

<div data-role="collapsible" data-collapsed="true">
	<h2 id="toc-2">開閉</h2>
	<p>この部分には内容が入ります。</p>
</div>

実際に表示してみるとこのような感じ。

開閉式コンテンツを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

アコーディオン式コンテンツ

アコーディオン式コンテンツは、開閉式コンテンツ複数を１つのセットにし、その中かから1つだけ開いた状態にできるアコーディオンのようなコンテンツです。brr /> アコーディオン式コンテンツを作成するには、開閉式コンテンツを囲うコンテナをさらに作成し、そのコンテナに「data-role="collapsible-set"」を指定します。

開閉状態を制御する場合にはやはり「data-collapsed="false"」を使います。

<div data-role="collapsible-set">
	<div data-role="collapsible" data-collapsed="false">
		<h2 id="toc-4">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-5">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-6">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-7">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-8">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-9">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
</div>

アコーディオン式コンテンツを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

ヘッダー部分とコンテンツ部分の関連性をわかりやすくする

ここまでの指定だけでは、ヘッダー部分とコンテンツ部分が分かれているように見えてしまい、結びつきが曖昧な状態です。
これは、テーマ関連の属性「data-content-theme」を指定することで改善できます。

「data-content-theme」は、開閉式コンテンツ単独に対しても、アコーディオン式コンテンツのコンテナに対して一括指定することもできます。

<h2 id="toc-11">開閉式コンテンツ</h2>
<div data-role="collapsible" data-content-theme="d">
	<h2 id="toc-12">開閉</h2>
	<p>この部分には内容が入ります。</p>
</div>
		
<h2 id="toc-13">アコーディオン式コンテンツ</h2>
<div data-role="collapsible-set" data-content-theme="d">
	<div data-role="collapsible" data-collapsed="false">
		<h2 id="toc-14">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-15">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-16">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-17">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-18">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
	<div data-role="collapsible">
		<h2 id="toc-19">開閉</h2>
		<p>この部分には内容が入ります。</p>
	</div>
</div>

開閉式コンテンツのヘッダー、コンテンツの関連性を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

以上で開閉式コンテンツの紹介は終わりです。
次回はリストビューについて複数回に分けて紹介します。

参考

AWS