Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

Collapsibleウィジェットで開閉可能なパネルを作成するには?

2014年4月24日

タイトル領域をクリックすることでコンテンツ本体の表示/非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前のとおり、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 Collapsibleウィジェットを利用すれば、タイトル領域をタップすることで、コンテンツ本体の表示/非表示を切り替える、「開閉可能パネル」を作成できます。機能そのものは明快なので、さっそく、具体的なサンプルを見ていきます。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
  href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js">
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>jQuery Mobile TIPS</h1>
  </div>
  <div role="main" class="ui-content">
    <div data-role="collapsible">
      <h3>Rails 4アプリプログラミング</h3>
      <p>初心者にもわかりやすく、Rails開発を行う上での基礎的な構文、キーワード、Model、View、Controllerについて詳しく解説します。</p>
    </div>
  </div>
  <div data-role="footer">
    <h3>Copyright 1998-2014, YAMADA.Yoshihiro</h3>
  </div>
</div>
</body>
</html>
基本的な開閉可能パネルを表示するコード(collapse.html)
タイトルタップで本文を開閉

[(+)Rails 4アプリプログラミング]をタップ

タイトルタップで本文を開閉

 開閉可能なパネルを実装するには、以下のルールに従ってコンテンツをマークアップしてください。

  • タイトル領域は<h1>~<h6>要素(=ヘッダー要素)で表す
  • タイトル領域の後方に本文領域を配置する
  • タイトル/本文全体を<div data-role="collapsible">~</div>要素で囲む

 <h1>~<h6>要素は、文脈に応じていずれを利用しても構いません(デザインには影響しません)。本文領域も、内部的にはCollapsibleウィジェットによって<div>要素でラッピングされますので、マークアップに特別な制限はありません。

 サンプルを実行すると、最初は本文が折り畳まれた状態で表示され、タイトル部分のタップによって表示状態になることを確認してください。

Collapsibleウィジェットの主なパラメーター

 Collapsibleウィジェットで利用できる主なパラメーターを、以下にまとめます。

(1)data-collapsedパラメーター

 本文領域を最初に折り畳んでおくかどうかを表します。「false」で、本文領域が開いた状態でページが表示されます。デフォルトは「true」(折り畳む)です。

「data-collapsed="false"」で、本文領域を開いた状態をデフォルトに
(2)data-theme/data-content-themeパラメーター

 開閉可能パネルに適用するテーマを表します。ヘッダー部分はdata-themeパラメーターで、本文部分はdata-content-themeパラメーターを指定します。それぞれデフォルトは親要素のテーマを継承します。

data-theme/data-content-themeパラメーターがいずれも「b」の場合
(3)data-collapsed-icon/data-expanded-iconパラメーター

 パネルが閉じているとき、開いているときに、それぞれヘッダー部に表示されるアイコンを表します。利用できるアイコンについては、別稿「jQuery Mobileページでアイコン付きのボタンを配置するには?」を参照してください。デフォルトは「plus」/「minus」です。

data-collapsed-icon/data-expanded-iconパラメーターが「carat-d」、「carat-u」のとき

 また、アイコンの位置はdata-iconposパラメーターで指定することもできます(設定値は、「left」/「right」/「top」/「bottom」/「none」/「notext」)。

アイコンをタイトルの上に表示(「data-iconpos="top"」の場合)
(4)data-insetパラメーター

 パネルをインセットモードで表示するかどうかを決定します。「false」とすることで、表示領域の幅いっぱいにパネルを表示します。デフォルトは「true」です。

「data-inset="false"」とした場合
(5)data-cornersパラメーター

 パネルの角に丸め効果を適用するかを指定します。デフォルトは「true」なので、角丸を解除したい場合に、このパラメーターを「false」とします。

「data-corners="false"」とした場合
(6)data-miniパラメーター

 タイトル領域の縦幅が狭まるコンパクトなバージョンでパネルを表示します。デフォルトは「false」です。

「data-mini="true"」とした場合
(7)data-collapse-cue-text/data-expand-cue-textパラメーター

 スクリーンリーダーで利用されるべきテキストを指定します。デフォルトは、それぞれ「click to collapse contents」「click to expand contents」です。

※以下では、本稿の前後を合わせて5回分(第14回~第18回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
14. Tableウィジェットでレスポンシブルなテーブルを作成するには?(Column toggle編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(列を選択的に表示するColumn toggleモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
15. Tableウィジェットでレスポンシブルなテーブルを作成するには?(Reflow編)

画面サイズに応じて表示幅を調整してくれるレスポンシブル・テーブル(テーブル/連票と表示形式そのものを切り替えるReflowモード)を、jQuery MobileのTableウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
16. 【現在、表示中】≫ Collapsibleウィジェットで開閉可能なパネルを作成するには?

タイトル領域をクリックすることでコンテンツ本体の表示/非表示を切り替えられる「開閉可能パネル」を、Collapsibleウィジェットで簡単に作成する方法を解説する。

jQuery Mobile逆引きリファレンス
17. Collapsiblesetウィジェットで開閉可能なパネルを作成するには?

コンテンツ本体の表示/非表示を切り替える「開閉可能パネル」を束ねた「アコーディオンパネル」を、Collapsiblesetウィジェットで作成する方法を解説する。

jQuery Mobile逆引きリファレンス
18. jQuery Mobileページで複数列からなるグリッドレイアウトを作成するには?

標準機能を使ってグリッドレイアウトを作成する方法を解説。複数行にまたがるレイアウトや、レスポンシブレイアウトへの対応も説明する。

サイトからのお知らせ

Twitterでつぶやこう!