dropDownButton - ドロップダウンボタン

コンテンツをドロップダウンボタンとして編成するノードを定義します。

カテゴリ

拡張ライブラリ

構文

<xe:dropDownButton attributes>content</xe:dropDownButton>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `dropDownButton1`、`dropDownButton2` などです。
treeNodes	ドロップダウンボタンのノードを指定します。
onItemClick	ユーザーが選択した値を `context.getSubmittedValue()` を使用して取得するには、このイベントを使用します。

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

使用法

このコントロールは、最新のアクセシビリティ標準に対してテストされていません。推奨されるアクセシビリティパスはコンボボックスコントロールです。

例

以下のドロップダウンメニューコントロールには 3 つのコンテナノードがあり、各コンテナノードには 3 つのリーフノードがあります。各コンテナノードは 1 つのボタンを表し、各リーフノードはボタンドロップダウンメニューの選択項目を表します。リーフノードをクリックすると、送信されたリーフノードの値が計算結果フィールドに表示されます。

<xp:label value="Submitted value: " id="label1"></xp:label>
<xp:text escape="true" id="computedField1"
	value="#{requestScope.svalue}" style="font-weight:bold">
</xp:text>
<xp:panel
	style="height:118.0px;width:349.0px;border-style:ridge;border-width:thin;border-color:rgb(0,128,255)">
	<xe:dropDownButton id="dropDownButton1">
		<xe:this.treeNodes>
			<xe:basicContainerNode label="Button one">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button one, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button one, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button one, choice three" label="Choice three">
					</xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
			<xe:basicContainerNode label="Button two">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button two, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button two, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button two, choice three" label="Choice three">
					</xe:basicLeafNode>
				</xe:this.children>
			</xe:basicContainerNode>
			<xe:basicContainerNode label="Button three">
				<xe:this.children>
					<xe:basicLeafNode
						submitValue="Button three, choice one" label="Choice one">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button three, choice two" label="Choice two">
					</xe:basicLeafNode>
					<xe:basicLeafNode
						submitValue="Button 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:dropDownButton>
</xp:panel>