jQuery Mobile アコーディオン式コンテンツを設置する
公開日：2014年10月19日
最終更新日：2014年11月8日
アコーディオン式コンテンツ(Collapsibleset Widget)は、開閉式コンテンツを複数設置してグループ化し、タップしたコンテンツだけが開き他のコンテンツは自動的に閉じるUI要素です。スマートフォンサイトではアコーディオンメニューとしてよく利用されています。
«次の特集記事» jQuery Mobile レスポンシブテーブルを設置する
«前の特集記事» jQuery Mobile 開閉式コンテンツを設置する
【コンテンツ】
【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5
アコーディオン式コンテンツ(Collapsibleset Widget)の概要
アコーディオン式コンテンツは開閉式コンテンツをグループ化したものです。
タイトル部分をタップするとコンテンツ部分の表示/非表示が切り替わりますが、違うのは他の開閉式コンテンツが開いていたらすべて自動的に閉じることです。つまり同時に開くことができるコンテンツは１ブロックだけです。
設置するには開閉式コンテンツを複数並べ、
それらをデータ属性「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クラスが自動的につけられます。
以下は基本的なコード例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div role="main" class="ui-content"> <div data-role="collapsibleset"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.4</h2> <p>No.4のコンテンツ部分です。</p> </div> </div> </div> |
外観オプションの指定
オプションについては、開閉式コンテンツのものがほぼそのまま使えます。
それぞれ以下のオプションを指定した例を示します。
- 角丸を解除
- インセットモードを解除
- ヘッダーをミニサイズ
- テーマを変更(全体)
- テーマを変更(コンテンツ)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<div role="main" class="ui-content"> <p>◆角丸を解除◆<br /> 「data-corners="false"」指定</p> <div data-role="collapsibleset" data-corners="false"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> <p>◆インセットモードを解除◆<br /> 「data-inset="false"」指定</p> <div data-role="collapsibleset" data-inset="false"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> <p>◆ヘッダーをミニサイズ◆<br /> 「data-mini="true"」指定</p> <div data-role="collapsibleset" data-mini="true"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> <p>◆テーマを変更(全体)◆<br /> 「data-theme="b"」指定</p> <div data-role="collapsibleset" data-theme="b"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> <p>◆テーマを変更(コンテンツ)◆<br /> 「data-content-theme="b"」指定</p> <div data-role="collapsibleset" data-content-theme="b"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> </div> |
アイコンオプションの指定
アイコンについても開閉式コンテンツと全く同じデータ属性を使い、アイコン種類とアイコン表示位置を変更することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div role="main" class="ui-content"> <p>◆アイコン種類を変更◆</p> <div data-role="collapsibleset" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> <p>◆アイコン表示位置を変更◆</p> <div data-role="collapsibleset" data-iconpos="right"> <div data-role="collapsible"> <h2>開閉式コンテンツNo.1</h2> <p>No.1のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.2</h2> <p>No.2のコンテンツ部分です。</p> </div> <div data-role="collapsible"> <h2>開閉式コンテンツNo.3</h2> <p>No.3のコンテンツ部分です。</p> </div> </div> </div> |
動作オプションの指定
ページロード時の初期状態でコンテンツを開いておくには、開閉式コンテンツのdiv要素に「data-collapsed="false"」を指定します。
ただしアコーディオン式コンテンツの特徴から、指定するにしても１か所だけにします。２か所以上指定した場合は最後の指定が有効になります。
前回記事の開閉式コンテンツと今回のアコーディオン式コンテンツは、スマートフォンサイトではよく利用されるUIです。アコーディオンの場合は複数を同時に開くことはできませんが、頻繁にメニューを切り替える場合は縦に長くならず操作の手間も省けてメリットがあります。
«次の特集記事» jQuery Mobile レスポンシブテーブルを設置する
«前の特集記事» jQuery Mobile 開閉式コンテンツを設置する
スポンサーリンク
