折叠标记

在 <input type='image'>、<input type='button-type'> 或 <button> 标记中绘制具有正确大小和颜色的预定义“折叠标记”图形。

JSF 折叠标记尽管外观简单,但与使用预定义的图形相比却有很大的优点。即,您可以设置折叠标记的大小和颜色以使其与页面样式匹配。例如,可以指定使用 22 个像素大小的粉红色热折叠标记。

注意,此组件供其他 JSF 组件内部使用。我们未打算使其成为通用组件。

JSFTwistie 组件用于在按钮上绘制折叠标记提示图,即一个三角形。当应用于 <input> 标记时,它将在标记中央绘制提示图并清除背景色。当应用于 <button> 标记时,它会将提示图绘制成标记内容的一部分并通过 text-align 进行定位,但不清除背景。换而言之,在将其与 <input> 标记配合使用时,将假定它是更复杂组件(例如数据表的分页器)的组成部分,而在将其与 <button> 标记配合使用时,将假定它是标记内容的一部分。

相对于图像,折叠标记组件的优势在于支持样式(主要是大小和颜色),而图像却不支持。例如,可以按任意大小(宽度可达 999 像素)绘制任意颜色的折叠标记。除方向以外,折叠标记的所有方面都可以通过创建该折叠标记时提供的属性或者应用于该折叠标记的 CSS 设置样式。

发送组件的 JSF 标记

<hx:pagerDeluxe>

基本 HTML

<input type="image" id="id">

or

<input type="submit" id="id">

or

<input type="reset" id="id">

or

<input type="button" id="id">

or

<button id="id" />

当应用于 input 标记时,JSFTwistie 将使该标记的背景色透明。在 Windows® XP 中,这意味着可能会修改边框样式。当应用于 button 标记时,JSFTwistie 不具备此功能。

支持所有与基本标记相关联的属性。

支持所有与基本标记相关联的事件处理程序。

JavaScript 构造函数

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

id

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

属性

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

属性

表 1. 折叠标记属性

属性名称

描述

bar-style

list-style-position。值“inside”添加 1 线条,任何其他值都不会绘制线条。

color-edge

边框的颜色。如果省略,则从相关联的标记取得。

color-fill

如果样式中没有任何颜色,则使用黑色。注意,如果基本标记已禁用,则将始终使用“已禁用的”颜色来绘制小三角形。

direction

小三角形的方向:0 朝上,1 朝下,2 朝左,3 朝右。

size

小三角形的宽度(以像素计)。如果省略,则小三角形的大小将调整为相关联的标记的大小,即,“适合于”相关联的输入或按钮标记。

样式

小三角形的样式:0 表示长实心三角形,1 表示短粗实心三角形,2 表示“v”,3 表示实心三角形。

CSS 类

对于所有可选属性,如果未提供该属性,则将根据对基本标记指定的 CSS 类名并追加后缀 _twistie 来派生该属性的值。例如,如果未提供 color-fill,并且基本标记的类名为“foo”,则颜色由类 foo_twistie 的 color 属性定义。

表 2. 折叠标记 CSS 类

CSS 类名

描述

样式

list-style-type。样式类型“square”被处理为小三角形样式 3,“circle”为小三角形样式 1,而“decimal”为小三角形样式 0。任何其他值(包括 none)都被处理为小三角形样式 2。

bar-style

list-style-position。值“inside”添加 1 线条,任何其他值都不会绘制线条。

size

高度。小三角形的大小根据相关联标记的计算(有效)高度而调整。注意,此属性不是从 base_twistie 类取得,而是直接从基本标记的样式取得。

color-fill

如果样式中没有任何颜色,则使用黑色。注意,如果基本标记已禁用,则将始终使用“已禁用的”颜色来绘制小三角形。

color-edge

边框的颜色。如果省略,则从相关联的标记取得。

API 调用

表 3. 折叠标记 API 调用

API 调用

描述

redraw()

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

uirelease()

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

setValue(string)

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

object = getValue(boolean)

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

object = setAttribute(attribute)

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

string = getAttribute(attribute-name)

检索属性的当前值。

局限性

示例代码

在 input 标记中绘制指向右边并且宽度为 19 像素的蓝色短三角形折叠标记,由构造函数确定样式。

<input style="width:32px;height:32px" type="submit" id="form1:button1" value="">
<script>
hX.addComponent("form1:button1", new hX.JSFTwistie("direction:3", "color-fill:blue", style:0",
                  "bar-style:0", "size:19"));
</script>

在 button 标记中绘制指向右边并带有条纹的灰边淡蓝色三角形折叠标记,其大小与按钮一致并由 CSS 确定样式。

<style>
.twistie3B_twistie {
	color:#8080ff;
	border-left-color:silver;
	list-style-type: square;
	list-style-position:inside;
}

	</style>
<button  class="twistie3B" style="width:32px;height:32px" type="submit" id="form1:button23B"></button>
<script>
hX.addComponent("form1:button23B", new hX.JSFTwistie("direction:1"));
</script>

反馈