djVerticalSlider - Dojo 垂直スライダ

垂直スライダの数値を受け入れます。

カテゴリ

Dojo フォーム

構文

<xe:djVerticalSlider attributes>content</xe:djVerticalSlider>

表 1. 必須プロパティ
プロパティ	説明
id	デフォルトは `djVerticalSlider1`、`djVerticalSlider2` などです。
value	コントロールをデータ要素にバインドします。
style	スライダの次元を指定します。
discreteValues	スライダ上の値の数を指定します。
minimum	スライダの開始値を指定します。
maximum	スライダの終了値を指定します。

表 2. すべてのプロパティ
カテゴリ	プロパティ
アクセシビリティ	alt、tabIndex、title、waiRole、waiState
basics	binding、clickSelect、dir、disabled、discreteValues、id、immediate、lang、loaded、maximum、minimum、multipleSeparator、multipleTrim、pageIncrement、readOnly、rendered、rendererType、required、showButtons、slideDuration、type
data	converter、defaultValue、disableClientSideValidation、disableModifiedFlag、disableValidators、showReadOnlyAsDisabled、validator、validators、value、valueChangeListener、valueChangeListeners
dojo	dojoAttributes、dojoType、dragRestriction、intermediateChanges、tooltip
イベント	onBlur、onChange、 onClick、onClose、onDblClick、onFocus、onHide、onKeyDown、onKeyPress、onKeyUp、onMouseDown、onMouseEnter、onMouseLeave、onMouseMove、onMouseOut、onMouseOver、onMouseUp、onShow
styling	disableTheme、style、styleClass、themeId

使用法

これは Dojo コントロールです。

実行時に、垂直スライダがページに表示されます。ユーザーはスライダをスライドさせて、数値を選択できます。

ルール (ハッシュマーク) やラベルを追加するには、djSliderRule - Dojo スライダルールや djSliderRuleLabels - Dojo スライダルールラベルを使用します。

例

以下の例は、スコープ変数にバインドされる垂直スライダ、ページを送信するためのボタン、スコープ変数の値を表示する計算結果フィールドを示します。

<xp:table>
	<xp:tr>
		<xp:td>Vertical Slider</xp:td>
		<xp:td>
			<xe:djVerticalSlider id="djVerticalSlider1" style="margin: 5px;width:75px; 
height: 200px;"
				value="#{sessionScope.djVerticalSlider1}" discreteValues="1000"
				maximum="999" minimum="0">
				<xe:djSliderRuleLabels id="djSliderRuleLabels1"
					container="leftDecoration"
					style="width:20px;font-size:75%;color:gray;">
					<xe:this.labelsList>
						<xe:djSliderRuleLabel 
label="0"></xe:djSliderRuleLabel>
						<xe:djSliderRuleLabel 
label="999"></xe:djSliderRuleLabel>
					</xe:this.labelsList>
				</xe:djSliderRuleLabels>
				<xe:djSliderRule id="djSliderRule1"
					container="leftDecoration" style="width:5px;" count="11">
				</xe:djSliderRule>				
				<xe:djSliderRule id="djSliderRule2" style="width:5px;"
						count="11" container="rightDecoration">
				</xe:djSliderRule>
				<xe:djSliderRuleLabels id="djSliderRuleLabels2"
						container="rightDecoration" style="width:5px;font-
size:75%;color:gray;">
				</xe:djSliderRuleLabels>
			</xe:djVerticalSlider>
		</xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>
			<xp:button value="submit" id="button1">
				<xp:eventHandler event="onclick" submit="true" 
refreshMode="complete" immediate="false" save="true">
			</xp:eventHandler></xp:button>
		</xp:td>
		<xp:td></xp:td>
	</xp:tr>
	<xp:tr>
		<xp:td>Value</xp:td>
		<xp:td><xp:text escape="true" id="computedField1" value="#
{sessionScope.djVerticalSlider1}"></xp:text></xp:td>
	</xp:tr>
</xp:table>