popupMenu - ポップアップメニュー

コンテンツをポップアップメニューとして編成するノードを組み込みます。

カテゴリ

拡張ライブラリ

構文

<xe:popupMenu attributes>content</xe:popupMenu>

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

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

使用法

クライアントサイドのイベントに以下のコードを使用して、ポップアップメニューを開くことができます。

XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()})

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

例

以下のポップアップメニューコントロールには 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>
<br></br>
<xp:button value="Pop me up" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()})]]>
			</xp:this.script>
	</xp:eventHandler>
</xp:button>
<xe:popupMenu id="popupMenu1">
	<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:popupMenu>