jQuery Mobile アコーディオン式コンテンツを設置する

アコーディオン式コンテンツ(Collapsibleset Widget)は、開閉式コンテンツを複数設置してグループ化し、タップしたコンテンツだけが開き他のコンテンツは自動的に閉じるUI要素です。スマートフォンサイトではアコーディオンメニューとしてよく利用されています。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. アコーディオン式コンテンツ(Collapsibleset Widget)の概要
  2. 使用するデータ属性
  3. 基本的な設置方法
  4. 外観オプションの指定
  5. アイコンオプションの指定
  6. 動作オプションの指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

アコーディオン式コンテンツ(Collapsibleset Widget)の概要

アコーディオン式コンテンツは開閉式コンテンツをグループ化したものです。
タイトル部分をタップするとコンテンツ部分の表示/非表示が切り替わりますが、違うのは他の開閉式コンテンツが開いていたらすべて自動的に閉じることです。つまり同時に開くことができるコンテンツは1ブロックだけです。

アコーディオン式コンテンツの画面例

設置するには開閉式コンテンツを複数並べ、
それらをデータ属性「data-role="collapsibleset"」を指定した div要素で囲います。

グループ化された開閉式コンテンツ間には隙間がなくなり、つながって表示されます。

外観やアイコンを変更するオプションは開閉式コンテンツと同じものを使用できますが、開閉式コンテンツ個別に指定した場合はそちらが優先されます。

使用するデータ属性

データ属性 説明
data-corners true | false 角丸をつけるかどうか
data-inset true | false 内包型の開閉コンテンツにするかどうか
trueの場合は角丸と余白がつく
data-mini true | false ヘッダーを小さいサイズにするかどうか
data-theme swatch letter (a-z) 全体に適用するスウォッチ
data-content-theme swatch letter (a-z) コンテンツに適用するスウォッチ
data-collapsed-icon アイコンリスト参照 閉じている状態のときに使うアイコン
デフォルトは "plus"
data-expanded-icon アイコンリスト参照 開いている状態のときに使うアイコン
デフォルトは "minus"
data-iconpos left | right | top | bottom | notext アイコンの表示位置
data-collapsed true | false ページロード時に閉じた状態にするかどうか

基本的な設置方法

まずは開閉式コンテンツを複数並べます。
そしてそれらをdiv要素で囲い、データ属性「data-role="collapsibleset"」と指定します。

コンテナにしたdiv要素には、ui-collasible-setクラスが自動的につけられます。

以下は基本的なコード例です。

外観オプションの指定

オプションについては、開閉式コンテンツのものがほぼそのまま使えます。

それぞれ以下のオプションを指定した例を示します。

  • 角丸を解除
  • インセットモードを解除
  • ヘッダーをミニサイズ
  • テーマを変更(全体)
  • テーマを変更(コンテンツ)

アイコンオプションの指定

アイコンについても開閉式コンテンツと全く同じデータ属性を使い、アイコン種類とアイコン表示位置を変更することができます。

動作オプションの指定

ページロード時の初期状態でコンテンツを開いておくには、開閉式コンテンツのdiv要素に「data-collapsed="false"」を指定します。
ただしアコーディオン式コンテンツの特徴から、指定するにしても1か所だけにします。2か所以上指定した場合は最後の指定が有効になります。

前回記事の開閉式コンテンツと今回のアコーディオン式コンテンツは、スマートフォンサイトではよく利用されるUIです。アコーディオンの場合は複数を同時に開くことはできませんが、頻繁にメニューを切り替える場合は縦に長くならず操作の手間も省けてメリットがあります。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

スポンサーリンク

ページの先頭へ