jQuery Mobile 開閉式コンテンツを設置する

開閉式コンテンツ(Collapsible Widget)は、タイトルをタップするとコンテンツが開いたり閉じたりする UI要素です。スマートフォンサイトでは折りたたみメニューとしてよく利用されています。この記事では基本的な設置方法とオプション指定を解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. 開閉式コンテンツ(Collapsible Widget)の概要
  2. 使用するデータ属性
  3. 基本的な設置方法
  4. ネストした階層構造のコンテンツ
  5. 外観オプションの指定
  6. アイコンオプションの指定
  7. 動作オプションの指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

開閉式コンテンツ(Collapsible Widget)の概要

開閉式コンテンツではタイトル部分をタップすると、内部にあるテキスト、メニュー、画像、ボタンなどコンテンツ部分の表示/非表示を切り替えることができます。初期状態で開いておくか閉じておくかは指定することができます。

開閉式コンテンツの画面例

設置するには、コンテナ要素にデータ属性「data-role="collapsible"」を割り当てます。

コンテナの中にはどんなコンテンツでも設置することができ、開閉式コンテンツをネストして階層構造をとることも可能です。

タイトル部分には開閉状態を示すアイコンが自動的に付加されます。デフォルトでは「+」と「-」のアイコンですが、変更することも可能です。

使用するデータ属性

データ属性 説明
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 ページロード時に閉じた状態にするかどうか
data-collapse-cue-text string 閉じる際にスクリーンリーダーソフトでユーザーに音声フィードバックを提供するためのテキストを指定。デフォルトは "click to collapse contents"
data-expand-cue-text string 開く際にスクリーンリーダーソフトでユーザーに音声フィードバックを提供するためのテキストを指定。デフォルトは "click to expand contents"

基本的な設置方法

開閉式コンテンツにするコンテナ要素に、データ属性「data-role="collapsible"」と指定します。

コンテナの中にはタイトルとなるヘッダーを h1-h6要素のいずれかで記述し、その後にコンテンツ本体を記述します。

なお、以下のクラスが自動的につけられます。

  • コンテナ: ui-collasible
  • ヘッダー: ui-collasible-heading
  • コンテンツ: 全体がdiv要素で囲まれ、ui-collasible-content

以下は基本的なコード例です。

ネストした階層構造のコンテンツ

開閉式コンテンツはネストとして階層構造にすることもできます。

階層構造の開閉式コンテンツ

外観オプションの指定

角丸を解除する

デフォルトでは角丸がついています。
これを解除するには、「data-corners="false"」を指定します。

インセットモードを解除する

デフォルトではインセットモードになっています。
これを解除するには、「data-inset="false"」を指定します。

ヘッダーを小さなサイズにする

ヘッダー部分のサイズを小さくするには、「data-mini="true"」を指定します。

テーマを変更する

ヘッダー部分を変更するには、data-theme属性を使います。
コンテンツ部分を変更するには、data-content-theme属性を使います。

アイコンオプションの指定

種類を変更する

アイコンのデフォルトは、コンテンツが閉じているときは "plus" で、コンテンツが開いているときは "minus" です。
これらをそれぞれ、data-collapsed-icon属性と data-expanded-icon属性を使って変更することができます。

以下の例では下向き矢印と上向き矢印に変更しています。

表示位置を変更する

デフォルトではアイコンの表示位置は左です。
これを data-iconpos属性を使って変更することができます。

動作オプションの指定

ページロード時にコンテンツを開いておく

デフォルトではコンテンツは閉じた状態です。
これを開いた状態にするには、「data-collapsed="false"」を指定します。

開閉式コンテンツはページロード時の初期状態で閉じた状態でも開いた状態でも指定できます。次の記事では開閉式コンテンツを複数設置し、コンテンツを開いたときは他のコンテンツが自動的に閉じるアコーディオン式コンテンツを紹介します。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ