おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、その下に詳細を示すコンテンツが表示されるウィジェットです。同じ領域をクリックすると詳細が閉じられて、元の形に戻ります。複数のウィジェットをグループ化して表示したり、ウィジェットを入れ子構造にできたりします。
概要と詳細とでコンテンツを分割して表示したいときや、コンテンツ表示する面積を小さく留めておきたいときに使います。
項目の構成
ウィジェットやウィジェットに表示する内容は以下の属性などを囲みます。
１．ウィジェットの部分は、data-role="collapsible"を持つタグ(<div>、<fieldset>)
２．概要部分。予め表示されている箇所は、<h1>～<h6>、<legend>
３．詳細部分。クリック・タップされた後に表示される箇所は、<p>～</p>、<div>～</div>
詳細を予め開いておく
詳細部分をユーザーに知らせるために、ウィジェットを表示したときに予め詳細部分が開いている状態にするには、「data-collapsed="false"」を設定します。
ページ幅いっぱいに表示
collapsibleウィジェットは、デフォルトでは、概要と詳細には角丸が表示され、グループ化されたような表示になりますが、data-inset="false"を設定すると、ページの幅いっいに表示されて角丸がなくなります。
アイコンのカスタマイズ
collapsibleウィジェットのデフォルト状態では、アイコンの位置は左端で、形状は詳細を閉じているときが「+」で、開いているときが「-」ですが、下記の属性値を変更することでこれを変更できます。
１．data-iconpos
２．data-collapsed-icon
３．data-expanded-icon
data-iconpos属性はアイコンを表示する位置をleft(デフォルト),right,top,bottomのいずれかで設定し、これらはボタンのときと同様でleft,rightを設定したときは高さ1行分、top,bottomを指定したときの高さは２行分。
data-collapsed-iconは詳細が閉じられているときに表示するアイコン、data-expanded-iconは詳細が開かれているときに表示するアイコンを設定する属性です。値はボタンと同じアイコン名称を設定します。
複数のウィジェットをグループ化して表示してみる
複数のウィジェットをグループ化して表示したいときは、全体を<div data-role="collapsible-set">で囲みます。こうすることで、上端ウィジェットの上側と下端ウィジェットの下側の角が丸みのついたデザインに変更されます。
入れ子構造を設定
ウィジェットの中に別のウィジェットを組み込めます。だた組み込むウィジェットの階層が深くなると画面の操作性や表示スピードが損なわれるので注意が必要です。
サンプルコードの実行結果はこちら
|
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 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile 折り畳みを設定する</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <article data-role="content"> <div data-role="collapsible" data-collapsed="false" data-inset="false" data-collapsed-icon="arrow-l" data-expanded-icon="arrow-d"> <h1>折り畳みテスト</h1> <div>ここにテキストを書く</div> </div> <!-- 複数のウィジェットをグループ化する --> <div data-role="collapsible-set"> <div data-role="collapsible"> <h1>日本</h1> <p>東京</p> </div> <div data-role="collapsible"> <h1>アメリカ</h1> <p>ワシントン</p> </div> <div data-role="collapsible"> <h1>イギリス</h1> <p>ロンドン</p> </div> </div> <!-- 入れ子構造の折り畳み --> <div data-role="collapsible"> <h1>地球</h1> <p>国別</p> <div data-role="collapsible-set"> <div data-role="collapsible"> <h1>日本</h1> <p>東京</p> </div> <div data-role="collapsible"> <h1>アメリカ</h1> <p>ワシントン</p> </div> <div data-role="collapsible"> <h1>イギリス</h1> <p>ロンドン</p> </div> </div> </div> </article> </section> </body> </html> |
| 設定対象 | 名称="設定値"(太字はデフォルト) | 説明 |
|---|---|---|
| ウィジェット | data-role="collapsible" | 折り畳みのウィジェットとして表示 |
| data-role="collapsible-set" | 複数のウィジェットをグループ化して表示 | |
| data-inset="true|false" | ページ幅いっぱいに表示するか否か | |
| data-theme="テーマ名称" | ウィジェットのテーマ | |
| アイコン | data-collapsed-icon="アイコン名称" | 詳細を閉じたときにアイコン |
| data-expanded-icon="アイコン名称" | 詳細を開いたときのアイコン | |
| data-iconpos="left|right|top|bottom" | アイコンの位置 | |
| 項目 | data-collapsed="true|false" | 項目を閉じておくか否か |
| data-content-theme="テーマの名称" | 詳細表示のテーマ |