accordion - アコーディオン

展開するとコンテンツが表示されるノードを組み込みます。

カテゴリ

拡張ライブラリ

構文

<xe:accordion attributes>content</xe:accordion>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `accordion1`、`accordion2` などです。
treeNodes	リスト対象のノードを指定します。
onItemClick	このイベントを使用して、ユーザーが選択した値を処理します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
basics	binding、id、loaded、rendered、rendererType、treeNodes
イベント	onItemClick
styling	disableTheme、style、styleClass、themeId

例

以下のアコーディオンコントロールには 3 つのコンテナノードがあり、各コンテナノードには 3 つのリーフノードがあります。ユーザーがコンテナノードをクリックすると、そのノードが展開されます。リーフノードをクリックすると、送信されたリーフノードの値が計算結果フィールドに表示されます。

<xp:label value="Submitted value: " id="label1"></xp:label>
<xp:text escape="true" id="computedField1"
	value="#{requestScope.svalue}" style="font-weight:bold">
</xp:text>
<xe:accordion id="accordion1" style="width:400px; height:144px;">
	<xe:this.treeNodes>
		<xe:basicContainerNode label="Container one">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container one, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container two">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container two, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container three">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container three, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container three, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container three, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
	</xe:this.treeNodes>
	<xp:eventHandler event="onItemClick" submit="true"
		refreshMode="partial" refreshId="computedField1">
		<xe:this.action>
			<![CDATA[#{javascript:requestScope.svalue = context.getSubmittedValue()}]]>
		</xe:this.action>
	</xp:eventHandler>
</xe:accordion>