機能説明

開閉型のブロック形式で見出しと詳細情報を取り扱うインタフェースを提供します。
複数配置した場合、<div data-role=“collapsible-set”>タグ内に配置することで
アコーディオン表現が可能です。また、内部タグに同タグを配置することで入れ子表現が可能です。

詳しくは jQueryMobile Collapsible および jQueryMobile Collapsible set(accordion) を参照してください。
  • このタグはスマートフォン用の画面向けにデザインされています。
  • このタグはjQuery Mobile 1.0以降から対応しています。

属性一覧

注釈 属性名 説明 省略時の動作
Boolean属性 collapse boolean 初期表示時の開閉状態を指定します。 「true」の場合、閉じた状態で出力されます。
「false」の場合、開いた状態で出力されます。
true
contentTheme String 詳細情報となるブロック部分のテーマを指定します。省略した場合は、既定のテーマを使用します。
テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。
使用可能なテーマの名前については、 jQuery Mobileのリファレンス を参照してください
-
Boolean属性 dataInset boolean 挿しこみリスト形式の有効・無効を指定します。
trueの場合、周囲との間に少し余白ができ、角を丸くしたリスト形式で出力します。
falseの場合、通常のリスト形式で出力します。
本属性は Ver.8.0.9 以降のバージョンで使用可能です。
詳細は下記の dataInset を参照してください。
true
dataTheme String ヘッダとなるボタン部分のテーマを指定します。省略した場合は、既定のテーマを使用します。
テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。
使用可能なテーマの名前については、 jQuery Mobileのリファレンス を参照してください
-
escapeJs JavaScriptエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が JavaScriptエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の JavaScriptエスケープ処理は行われません。
未指定の場合は「現在実行中の プレゼンテーション・ページ に紐づくescapeJsの値」に則ってJavaScriptエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
escapeXml XMLエスケープの有効・無効を指定します。

「true」の場合、エスケープ対象の属性値が XMLエスケープされて出力されます。
「false」の場合、エスケープ対象の属性値の XMLエスケープ処理は行われません。未指定の場合は、「現在実行中の プレゼンテーション・ページ に紐づくescapeXmlの値」に則ってXMLエスケープ処理行われます。

詳しくは、「 エスケープ処理に関して 」を参照してください。
-
id String DOMエレメントを識別するためのIDを指定します。 代替idを付与
無害化 title String 開閉式ブロックの見出しとなるテキストを指定します。 -

サンプル

マークアップ例

マークアップ例
マークアップ例。
タグの内部に開閉リストの内容を記述します。
プレゼンテーションページ (HTML)
<imart type="spCollapsible" title="開閉リスト" dataTheme="b" contentTheme="b">
  <p>内部のコンテンツです。</p>
</imart>

開閉ブロックを入れ子表現する例

開閉ブロックを入れ子表現する例
開閉ブロックを入れ子表現する例。
内部タグにさらにspCollapsibleタグを配置します。
プレゼンテーションページ (HTML)
<imart type="spCollapsible" title="開閉ブロック" dataTheme="b" contentTheme="b">
  <p>内部のコンテンツです。</p>
  <imart type="spCollapsible" title="子ブロック" dataTheme="a" contentTheme="a">
    <p>子ブロックの内部のコンテンツです。</p>
  </imart>
</imart>

アコーディオン形式の表示例

アコーディオン形式の表示例
アコーディオン形式の表示例。
複数のspCollapsibleタグを<div data-role=“collapsible-set”>で囲みます。
プレゼンテーションページ (HTML)
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
  <imart type="spCollapsible" title="開閉ブロック1">
    <p>内部のコンテンツです。</p>
  </imart>
  <imart type="spCollapsible" title="開閉ブロック2">
    <p>内部のコンテンツです。</p>
  </imart>
  <imart type="spCollapsible" title="開閉ブロック3">
    <p>内部のコンテンツです。</p>
  </imart>
</div>

dataInset

dataInset
dataInset=“false” の指定した場合は、角丸ではなく通常のリスト形式になります。
プレゼンテーションページ (HTML)
<imart type="spCollapsible" title="開閉ブロック" dataTheme="b" contentTheme="b">
  <p>内部のコンテンツです。</p>
  <imart type="spCollapsible" title="子ブロック" dataTheme="a" contentTheme="a" dataInset="false">
    <p>子ブロックの内部のコンテンツです。</p>
  </imart>
</imart>