このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第7回

サンプルで学ぶjQuery Mobileまとめ(後編)

2011年08月19日 13時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

開閉パネル data-role属性「collapsible」

 親要素にdata-role属性「collapsible」を指定すると、開閉パネルを作成できます。開閉パネルではh1~h6要素で見出しを設定し、その後ろの要素でパネルの内容を記述します。

サンプル07[HTML]


<div data-role="collapsible">
  <h3>開閉パネル</h3>
  <p>クリックするとパネルが開きます。</p>
</div>
<画像>07-01.jpg,07-02.jpg
開閉パネルでは見出し部分が -アイコンが付いたボタンになり(左)、ボタンをタップするとパネルが閉じ+アイコンに変化する(右)

 開閉パネルは、デフォルトではパネルが開いた状態で表示されますが、 data-collapsed属性「true」を指定するとパネルを閉じて表示します(サンプル8)。

サンプル08[HTML]


<div data-role="collapsible" data-collapsed="true">
  <h3>開閉パネル</h3>
  <p>クリックするとパネルが開きます。</p>
</div>
<画像>08-01.jpg,08-02.jpg
初期状態でパネルが閉じている開閉パネル

アコーディオンパネル data-role属性「collapsible-set」

 複数の開閉パネルをdata-role属性「collapsible-set」を指定した要素で包むと、アコーディオンパネルを作成できます。

サンプル09[HTML]


<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>パネル1</h3>
    <p>パネル1が開きます。</p>
  </div>
  <div data-role="collapsible">
    <h3>パネル2</h3>
    <p>パネル2が開きます。</p>
  </div>
  <div data-role="collapsible">
    <h3>パネル3</h3>
    <p>パネル3が開きます。</p>
  </div>
</div>
<画像>09.jpg
アコーディオンパネル

 デフォルトでは最後のパネルが開いた状態で表示されますが、任意のパネル要素にdata-collapsed属性「false」を付与するとそのパネルは開いて、そのほかのパネルは閉じて表示されます。

 ただし、執筆時のバージョン(ベータ2)では正常に動作しておらず、閉じたいパネルすべてにdata-collapsed属性「true」を指定する必要があります。

サンプル10[HTML]


<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="false">
    <h3>パネル1</h3>
    <p>パネル1が開きます。</p>
  </div>
  <div data-role="collapsible" data-collapsed="true">
    <h3>パネル2</h3>
    <p>パネル2が開きます。</p>
  </div>
  <div data-role="collapsible" data-collapsed="true">
    <h3>パネル3</h3>
    <p>パネル3が開きます。</p>
  </div>
</div>
<画像>10.jpg
パネル1を開いた状態でアコーディオンを表示する
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング