滑块

将 <input type='text'> 标记更改为旁边带有按钮的字段,该按钮可以“弹出”用于拾取数字的滑块。基本上,JSFSlider 的行为与“可编辑组合框”相似。用户可以在输入区域中输入数字,也可以单击拾取器按钮并从下拉列表中“弹出”的滑块中选择日期,即,弹出滑块,而不是弹出选项列表。

组合体组件的大小和形状与 <input> 标记相同,并且输入字段将保留对其所作的任何其他设置,例如输入辅助。

此组件与 NumberConverter 处理相同的数字。

JSFSlider 组件对 <input> 字段添加了辅助控件按钮,该按钮可以弹出用于选择数字的滑块。

辅助控件按钮将添加到输入字段右边。尽管现在添加了按钮,但输入字段却完整地保留了它的所有原始特征。例如,如果将输入字段宽度定义为 120px,则添加帮助控件按钮后,组合体组件的宽度现在也是 120px。此按钮将采用与输入字段匹配的样式属性,例如,其边框与输入字段的边框重叠。应用于输入字段的适用属性(例如 disabled)也将影响此按钮。

该滑块所在弹出窗口的行为与正常 Windows® 弹出窗口相似。即,如果在该弹出窗口外部单击,该弹出窗口将关闭,并且不会对值进行更改。在该弹出窗口内按下鼠标按键时,“指示笔”将移至最接近的刻度。并且,移动鼠标时,指示笔将移至另一个值。释放鼠标按键时,将选中该值。滑块中的选项始终“与刻度对应”,即,滑块是不连续的,您无法选择两个刻度之间的值。

通常,该弹出窗口显示在输入字段下方并对齐左边。如果该弹出窗口在输入字段下方“放不下”,即,该输入字段在窗口底部附近,则该弹出窗口将显示在输入字段上方。

除滑块大小以外,可以通过 CSS 对该弹出窗口和滑块的各个部分设置样式。通过使用构造滑块时指定的一个属性,可以显式地设置滑块宽度。滑块高度是根据内容计算的。

JSFSlider 需要 NumberConverter。此转换器用于在输入字段值(字符串)与 JavaScript™ 数字对象之间进行转换。此转换器还用于对该滑块中显示的数字标签进行格式化。应该在构造滑块之前构造转换器,并且,应该将转换器 ID 传递给滑块。输入字段还可以有相关联的 NumberValidator 和/或 NumberAssist 组件。如果某个验证器与输入字段相关联,则必须将其作为构造函数的属性传递给 JSFSlider。验证器用来构造滑块的最小值和最大值界限,因此,强烈建议您提供验证器。如果某个“辅助”与输入字段相关联,则它不需要与 JSFSlider 相关联。

发送组件的 JSF 标记

<hx:inputText>

基本 HTML

<input type="text">

滑块的值将作为输入字段值进行传递。应该按照组件的相关转换器所描述的样式对该值进行格式化。如果最初未将任何值传递给页面,则滑块将没有初始值。

支持所有与文本类型输入相关联的属性。

支持所有与文本类型输入相关联的事件处理程序。

JavaScript 构造函数

hX_5.addComponent("id", new hX_5.JSFSlider(attributes)); 其中

id

组件所连接至的 HTML 标记的 ID。

属性

逗号分隔的属性列表,其中每个属性都是一个加引号的字符串,此字符串包含使用冒号分隔的属性名称和值,例如,"label:MyLabel"。

属性

表 1. 滑块属性

属性名称

描述

converter

已构造的转换器的 ID。此转换器描述输入字段中值的格式。

validator

已构造的验证器的 ID。如果提供了验证器,则将使用此验证器中所描述的约束来限制用户可选取的值。

css-prefix

描述日历可视外观的 CSS 类集的基类。

increment

滑块中“记号”之间的增量。例如,如果最小值是 1,最大值是 10,则增量为 1 时将在 1、2、3、4、5、6、7、8、9 和 10 处绘制记号。在滑块中,只能选择标有记号的值。值可以是小数,例如 .01。

label-increment

在记号下绘制标签的增量。如果值为 1,则在每个记号下绘制一个标签。如果值为 2,则每隔一个记号绘制一个标签,以此类推。

show-labels

如果指定,则当前所选颜色的名称将显示在输入字段中该颜色样品的上面。如果省略,则名称不显示,并且输入字段将仅显示一种颜色样品,指示当前所选颜色。注意,为了方便访问,在任何情况下,颜色名称都在输入字段中,此选项使名称可视。

scale-width

刻度的宽度(以像素计)。

button-border

控制如何根据输入字段绘制弹出按钮。

button-color

指定按钮的背景色。缺省情况下,背景色与输入字段的边框颜色相匹配。

CSS 类

滑块的 CSS 相当简单。应用于 input 标记的类确定了输入字段的样式,例如设置输入字段的边框,并通过进行扩展确定该字段旁弹出按钮的样式,该弹出按钮的样式与输入字段的边框匹配。另一组类确定了弹出滑块的样式。用于确定弹出窗口样式的那一组类遵循普通的 hxclient 命名约定,即,有一个“基本类名”,所有其他用于确定滑块样式的类都使用带有后缀的基本名称。缺省情况下,使用基类 inputText_Slider 来确定滑块样式。可以使用 css-prefix 属性来指定另一个基类。

表 2. 滑块 CSS 类

CSS 类名

描述

base_Slider

对包含滑块的 div 设置样式。注意,设置 div 的大小(宽度/高度)不会更改滑块(刻度和弹出窗口)的大小。要更改宽度,请使用 scale-width 属性。高度将始终计算得出。使用类的字体属性来设置滑块中任何文本的样式。

<base>_Slider-Body

对滑块的刻度和指示笔(内容)设置样式。颜色属性对刻度进行着色。背景色和边框对指示笔设置样式。

注: 用于确定弹出窗口样式的基类支持三类“效果”,在某些浏览器中,可以将这些效果应用于弹出窗口 div。并非所有浏览器都支持这些效果,在这种情况下,不会绘制这些效果。请参阅日期拾取器以获取详细信息。

API 调用

表 3. 滑块 API 调用

API 调用

描述

redraw()

重新绘制组件时将对基本标记的特性/属性所作的任何更改考虑在内。

uirelease()

释放与组件相关联的任何活动 UI。

setValue(string)

设置组件的值并确保提供的值有效。

object = getValue(boolean)

检索组件的值。如果该 boolean 为 false,则此函数等价于获取基本标记的值。如果该 boolean 为 true,则此值将作为 JavaScript 日期/时间对象返回,而不是作为字符串返回。

object = setAttribute(attribute)

设置属性,或如果以前已设置属性,则更改其值。

string = getAttribute(attribute-name)

检索属性的当前值。

辅助功能

滑块可完全通过键盘进行访问。输入字段和拾取器按钮都遵循跳进顺序。在输入字段中,向上方向键和向下方向键可以用来按增量增大/减小值。按向上方向键/向下方向键将按增量对值进行“微调”,直到释放该键为止。当该按钮带有焦点时,按空格键将显示滑块,并且焦点将移至“指示笔”。当滑块带有焦点时,按空格键将选中当前值,从而关闭该弹出窗口并将焦点返回到该按钮。按 ESC 键将关闭该弹出窗口,从而将焦点返回到该按钮并保持值不变。按向左方向键或向右方向键将更改值。

目前,滑块不报告 XML 角色/状态,但它符合 XHTML 的标准。我们将尽快添加此报告功能。

局限性

示例代码

对数字格式为百分比的字段添加滑块。将滑块限制为仅包含 0% 到 100% 的值。指定每 1% 绘制一个刻度,并且每 10% 绘制一个标签。使用指定的 CSS 类来绘制带有阴影的黑白滑块。

<style>
.inputText1_Slider {
	background-color:white;
	border:1px;
	border-style:solid;
	border-color:windowframe;
	font-family: sans-serif;
	font-decoration: none;
	color: black;
	outline-color: gray;
	outline-width: 4px;
	-moz-outlineColor: #E4E4E5;
	-moz-outline-width: 4px;
}

.inputText1_Slider_Body {
	background-color:silver;
	color: threedshadow;
	border-style:solid;
	border-color:threedhighlight;
	border-right-color:threedShadow;
}
	</style>

<script>
hX.addConverter("x1", new hX.NumberConverter("strict:1", "pattern:##0%", "locale:,.%‰-$"));
hX.addValidator("x1", new hX.NumberValidator( "min-bound:0.0",  "max-bound:1.0",  "required:true"));
hX.addComponent("form1:text1", new hX.JSFSlider("css-prefix:inputText1", "increment:.01",
                  "label-increment:10","converter:x1","validator:x1"));
</script>

反馈