• twitter
  • Facebook
  • はてなブックマーク
2012年05月24日(木)

[jQueryUI入門] accordionの使い方

jQueryUIでアコーディオンボックスを作成する方法を解説しています。アコーディオンボックスは見出しとパネルを縦に配置して、見出しをクリックする事で表示中のパネルを切り替えるためのボックスです。PCサイトよりもスマートフォンサイトなどでよく見かけるUIだと思います。jQueryUIの場合、アコーディオン作成に必要なファイルは「UICore」「UIWidget」の2種類です。開閉時にバウンドエフェクトを加える場合は、EffectsCoreも合わせてロードします。

jQueryUIで作成するアコーディオン

アコーディオンパネルは、divブロックなどをコンテナに設定し、見出しとして配置するh1~h6の見出しタグと、コンテンツとして使用する各ブロック要素を交互に並べて使います。配置する各コンテンツには、見た目を調整するためのクラス名を指定する事が出来ます。個別に設定しない場合は、デフォルトの値が自動で付与されるので、必要なHTMLコーディングと、javascriptの設定のみで使う事が出来ます。クラスを指定する場合は、(例)class="ui-accordion ui-widget ui-widget-content"のように複数のクラスを組み合わせて設定を行います。


全体をラップする(コンテナ)要素に指定するクラス名

  • ui-accordion アコーディオン外観を設定(横幅を100%に設定、ラッパー要素以下にアコーディオンスタイルを適用)
  • ui-widget ウィジット外観を設定
  • ui-helper-reset ヘルパースタイルを一旦リセット

見出しとなるh1~h6に指定するクラス名

アコーディオンの見出しとなるh1~h6要素には、ラベルとしてクリック可能な外観を設定します。一番上の見出しは「上部左右が角丸になるスタイル」、真ん中に配置される見出しは「角丸なし」、一番下の見出しには「下部左右が角丸になるスタイル」を適用するなどして、好きな形にアレンジ出来ます。ui-corner-topui-corner-allui-corner-bottomをクラス名に指定します。また、アクティブかどうかによって自動でテーマによる見出しの枠が調整されるので、個別に設定するよりもテーマで一括設定しておく方が簡単だと思います。

  • ui-accordion-header アコーディオンの見出しである事を明示
  • ui-helper-reset ヘルパースタイルを一旦リセット
  • ui-state-active アクティブの(開いた)状態に設定
  • ui-state-default デフォルトの状態にする(アクティブ以外の見出し)
  • ui-corner-top ボックスの上部(左上と右上)を角丸枠にする
  • ui-corner-all ボックスを角丸枠で囲む
  • ui-corner-bottom ボックスの下部(左下と右下)を角丸枠にする

アコーディオンの中身として表示されるdivブロックに指定するクラス名

パネルに対しても、現在の状態(オープンまたはクローズ等)によって、クラスが自動的に付与されるので、よほど個別にスタイルシートを変更したい場合でなければ、特に指定は必要ありません。テーマで一括設定した方が簡単です。

  • ui-accordion-content アコーディオンのパネル(中身)として使う事を明示
  • ui-helper-reset jQueryUI共通で、スタイルを一旦リセットする
  • ui-widget-content jQueryUIのウィジット共通で、コンテンツを表す
  • ui-accordion-content-active アコーディオンのパネル(中味)がアクティブの状態
  • ui-accordion-content-default アコーディオンのパネル(中身)がデフォルトの状態
  • ui-corner-bottom パネルの下部(左下、右下)だけを角丸にする(activeと同時に指定)
  • ui-corner-all パネルを角丸枠で囲む(defaultと同時に指定)

HTMLを設定

  1. <div id="コンテナID">
  2. <!-- 1番目のパネル -->
  3. <h3><a href="#a">アコーディオン見出し1</a></h3>
  4. <div id="a">内容パネル1</div>
  5. <!-- 2番目のパネル -->
  6. <h3><a href="#b">アコーディオン見出し1</a></h3>
  7. <div id="b">内容パネル2</div>
  8. <!-- 3番目のパネル -->
  9. <h3><a href="#c">アコーディオン見出し3</a></h3>
  10. <div id="c">内容パネル3</div>
  11. </div>

javascriptを設定

ロードするファイルは「jquery1.7以上」「jquery.ui.core」「jquery.ui.widget」の3つです。

  1. <script type="text/javascript">
  2. // 初期化
  3. $(function(){ $('#selecter').accordion({ /* アコーディオンの初期設定 */ }); }
  4. </script>

アコーディオンの初期設定やイベントは、セレクタに対してaccordion({})を呼び出す事で設定できます。オブジェクト形式のため、{ ‘プロパティ名’:'値’, ‘event’:function(event,ui){ } }など、プロパティやコールバックを一括設定する事が出来ます。

サンプル

初期状態でオープン
通常のアコーディオンパネルです。初期化されるとオープン状態として表示されます。
カスタマイズアイコン
アイコンを設定しました。アコーディオンの場合、アイコンはプロパティで変更できます。$(‘セレクタ’).accordion(‘option’, ‘icons’, {オブジェクト})で設定します。オブジェクトには、headerheaderSelectedの2つをキーにして「ui-icon-●●●」(アイコンの種類クラス名)を指定するだけです。{header:’ui-icon-triangle-1-w’, headerSelected:’ui-icon-triangle-1-nw’} などとします。アイコンを無効にする場合は、$(‘セレクタ’).accordion(‘option’, ‘icons’, false)を呼出します。
collapse
一番下のパネルです。collapsible(パネルのオープンをトグルに対応)を有効にした場合のアコーディオンパネルです。$(‘セレクタ’).accordion({ ‘collapsible’:true })で設定できます。デフォルトはfalseです。

関連投稿記事

Comment: