機能説明

開閉可能なリスト形式で見出しと詳細情報を取り扱うためのインタフェースを提供します。
  • バージョン7.2との互換性のためのタグです。spCollapsibleを使用してください。
  • このタグはスマートフォン用の画面向けにデザインされています。
  • jQuery Mobile 1.4.5 には対応していません。
    • jQuery Mobile 1.4.5 で画面を作成する場合はspCollapsibleタグを使用してください。

属性一覧

注釈 属性名 説明 省略時の動作
Boolean属性 collapse boolean 初期表示時の開閉状態を指定します。 「true」の場合、閉じた状態で出力されます。
「false」の場合、開いた状態で出力されます。
true
Boolean属性 dataInline boolean リスト内にボタンを配置した際のボタンサイズ最適化の有効・無効を指定します。
※複数ボタンを配置した際のボタンの並びに影響を与えます。
「true」の場合、ボタン並びが最適化されて出力されます。
「false」の場合、ボタン並びの最適化は行われません。
false
Boolean属性 dataInset boolean 挿しこみリスト形式の有効・無効を指定します。
周囲との間に少し余白ができ、角を丸くしたリストのセットが出力されます。
「true」の場合、挿しこみリスト形式で出力します。
「false」の場合、通常のリスト形式で出力します。
false
dataTheme String 詳細情報部分のテーマを指定します。省略した場合は、既定のテーマを使用します。
テーマをカスタマイズする場合は、この属性にテーマの名前を指定します。
使用可能なテーマの名前については、 jQuery Mobileのリファレンス を参照してください。
-
dividerTheme 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="spCollapsibleList" title="開閉リスト" dataTheme="b" dividerTheme="b" dataInline="true">
  <h3>内部のコンテンツです。</h3>
  <a data-role="button" data-icon="star"    data-inline="true">a button</a>
  <a data-role="button" data-icon="refresh" data-inline="true">b button</a>
</imart>

挿しこみリスト形式の表示例

挿しこみリスト形式の表示例
挿しこみリスト形式の表示例。
dataInset=“true”を指定します。
プレゼンテーションページ (HTML)
<imart type="spCollapsibleList" title="開閉リスト" dataTheme="b" dividerTheme="b" dataInline="true" dataInset="true">
  <h3>内部のコンテンツです。</h3>
  <a data-role="button" data-icon="star"   >a button</a>
  <a data-role="button" data-icon="refresh">b button</a>
  <a data-role="button" data-icon="forward">c button</a>
</imart>