图像

<input type='image'><input type='button-type'><img> 标记添加鼠标悬停、按下和禁用状态。

JSF 图像组件用于对诸如提交、复位、按钮和图像等按钮类型的标准 HTML <img><input> 标记进行扩充,从而为它们提供四种不同的可视状态,即正常(未按下)、按下、鼠标悬停和禁用。另外,此组件可用于对图像按钮添加可以修改样式或进行定位的标签和/或图标(小型图片),如果按钮已带有标签,则将添加第二个标签。

此组件未提供属性,十分简单,因而有效地提供了对 CSS 伪类悬停的支持。通过在 CSS 中指定 classname_moused 代替 classname:hover,可以在按钮上实现鼠标悬停效果。同样,此组件提供了指定按钮在处于按下和/或禁用状态时所用样式的功能。

除了提供状态以外,此组件还允许对按钮添加图标,以便对该按钮已有的任何图形/文本进行附加。例如,可以对按钮添加小箭头图形或提示图形。同样,可以对按钮添加标签,以便对该按钮可能已显示的标签进行附加。图标和标签都支持状态。例如,当鼠标悬停在标签上时,可以将该标签改为红色,也可以将图标改为黑色。

对于图像按钮(<input type="image">),此组件支持 JavaScript 提供的常用功能,即根据按钮状态切换 scr 属性值,例如,当鼠标悬停在按钮上时切换为另一图像。

对于 <img>,JSF 图像能够有效地将此标记转换为按钮。如果单击此图像时要执行操作,则应该指定单击事件处理程序。键盘将自动与 img 标记相关,以便可用于单击按钮,并且将调用单击事件处理程序。由于浏览器在缺省情况下不会对图像指定跳进顺序,因此,如果图像可以被单击,则您需要设置 tabindex 以将 img 放入 taborder

发送组件的 JSF 标记

<hx:commandExButton>

基本 HTML

<input type="image" id="id">
<input type="submit" id="id">
<input type="reset" id="id">
<input type="button" id="id">
<img src="src" id="id">

支持对基本标记设置的所有属性。

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

JavaScript 构造函数

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

id

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

属性

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

属性

表 1. 图像属性

属性名称

描述

depressed

对于图像和仅图像类型的按钮来说,按下按钮时要显示的图像的 URL。如果省略,则在按下的情况下使用常规图像。

disabled

指定对象是否可用。

icon-normal

处于正常状态时,要显示在图像/按钮之上的图标图像的 URL。例如,小三角形图像意味着按钮具有下拉菜单。

icon-moused

当鼠标指针(悬停)在图像/按钮上时,作为图标来显示的图像的 URL。还必须提供常规图像才能使用此事件。如果省略,则在悬停的情况下使用常规图像。

icon-depressed

当按下图像/按钮时,作为图标来显示的图像的 URL。还必须提供常规图像才能使用此事件。如果省略,则在按下的情况下使用常规图像。

label

要为对象显示的文本。

moused

对于图像和仅图像类型的按钮来说,当鼠标指针(悬停)在按钮上时要显示的图像的 URL。如果省略,则在悬停的情况下使用常规图像。

normal

对于图像和仅图像类型的按钮来说,当按钮处于正常状态(非悬停、未按下或未禁用状态)时,要显示的图像的 URL。还可以通过 <input> 标记的 src 属性来指定按钮的图像。对于图像标记,由于 HTML 限制,所以即使未使用 src,也必须提供该 src。
注: 对于此属性以及所有其他提供 URL 的属性,该 URL 可以引用文件系统上的文件或者包含在 URL 序言中。除了通过属性来指定图像之外,还可以通过 CSS 来指定图像。

CSS 类

表 2. 图像 CSS 类

CSS 类名

描述

user-supplied

作为 <input><img> 标记的类来提供。当图像/按钮处于正常(弹出)方式时,对该图像/按钮设置适当的样式,例如,设置高度、宽度或背景色。
注: 对于任何种类的图像/按钮或按钮状态,可使用背景图像样式属性来指定用作该按钮的图像。如果指定,则还必须设置高度和宽度属性以达到背景图像的大小。

<base>_moused

当鼠标指针(悬停)在图像/按钮上时,对该图像/按钮设置适当的样式,例如,设置高度、宽度或背景色。如果省略,则在悬停时使用正常状态。

<base>_depressed

当按下图像/按钮时,对该图像/按钮设置适当的样式,例如,设置高度、宽度或背景色。如果省略,则在按下时使用正常状态。

<base>_disabled

当禁用图像/按钮时,对该图像/按钮设置适当的样式,例如,设置高度、宽度和背景色。如果省略,则在禁用时使用正常状态。

<base>_Label

如果指定了标签,则设置标签在处于正常(弹出)状态时的样式。注意,必须在这个类中指定标签的字体属性,例如,字体系列和字体大小。不是从基类中选择字体属性。

<base>_Label_moused

如果指定了标签,则设置标签在按钮处于正常(弹出)状态时的样式。如果省略,则在悬停时对标签使用正常状态。

<base>_Label_depressed

如果指定了标签,则设置标签在按钮按下时的样式。如果省略,则在按下时使用正常状态。

<base>_Label_disabled

如果指定了标签,则设置标签在按钮禁用时的样式。如果省略,则在禁用时使用正常状态。

<base>_Icon

如果指定了图标,则设置图标在处于正常(弹出)状态时的样式。

<base>_Icon_moused

如果指定了图标,则设置图标在按钮处于正常(弹出)状态时的样式。如果省略,则在悬停时对图标使用正常状态。

<base>_Icon_depressed

如果指定了图标,则设置图标在按钮按下时的样式。如果省略,则在按下时使用正常状态。

<base>_Icon_disabled

如果指定了图标,则设置图标在按钮禁用时的样式。如果省略,则在禁用时使用正常状态。

注:
  • 在图标类中,如果至少提供了用于正常情况的背景图像,则将使用此背景图像绘制该图标,而无论是否设置了显式的图标属性。这将仅允许通过 CSS 指定图标。
  • 在标签和图标类中,样式属性 position 确定了元素在按钮中的定位方式。如果 position 为 absolute,则可使用 left、top、right 和 bottom 以绝对方式对按钮中的图标或标签进行定位。如果 position 为缺省值 relative,则可使用 text-align 和 vertical-align 对元素进行定位。text-align 仅支持 left、right 和 center,vertical-align 仅支持 top、middle 和 bottom。
  • 使用相对定位方式时,对于标签元素,可以使用 padding 或 margin 将元素向上/向下/向左/向右挪动。但是,对于图标元素(即 IMG),IE 不支持 padding,所以您应该使用 margin。并且,对于图标元素,IE 不支持 margin 值 right 或 top。因此,为了使图像右边界距离按钮右边界两个像素,请使用 position:absolute 定位方式并设置 right:2px。
  • 如果对图像按钮设置边框,则 IE 会在边框上绘制焦点矩形框。因此,如果边框颜色较深,则焦点矩形框可能不明显。
  • 对于任何 JSF 组件,如果以动态方式将其禁用,即通过 JS 将其禁用,则将其禁用后需要进行重新绘制。一旦按钮被禁用,DHTML 就会立即停止传播属性更改消息,因此按钮代码不会知道该按钮已被禁用。所以,必须显式地重新绘制按钮。

API 调用

表 3. 图像 API 调用

API 调用

描述

redraw()

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

uirelease()

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

setValue(string)

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

object = getValue(boolean)

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

object = setAttribute(attribute)

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

string = getAttribute(attribute-name)

检索属性的当前值。

局限性

在所呈示的带图标或带标签按钮中,如果当鼠标指针悬停在该按钮上时按下鼠标按键, 然后在鼠标按键保持按下的情况下将鼠标指针从按钮上移开,则此行为与标准 Windows® 按钮的行为不一致。在 Windows 中,可以在指针不在按钮上时按下该按钮,但是,如果在指针不在按钮上时释放鼠标按键,则不会执行任何操作。但是,如果在按住鼠标按键的情况下将指针移回到该按钮上,则将重新按下该按钮,并且释放鼠标按键时将执行单击操作。对于 JSF 图像按钮而言,即使将鼠标指针从按钮上移开,也会正确地按下该按钮。如果将鼠标指针重新移到该按钮上,则可能能够也可能无法按下该按钮。 在 IE 中,仅当按下鼠标按键时鼠标指针悬停在按钮上,并且释放鼠标按键时鼠标指针也悬停在该按钮上或者移回该按钮上时,才算单击。在 Mozilla 中,此行为不可靠。

示例代码

对 <img> 标记添加鼠标悬停图像、鼠标按下图像和单击处理程序。这些图像全都在 CSS 中指定。

<style>
.green, .green_moused,  .green_depressed {
    border-width: 0px;
    height: 25px;
    width: 113px;
    background-repeat: no-repeat;
}
.green { background-image: url("img/green-button.gif") }
.green_moused {	background-image: url("img/green-button-moused.gif") }
.green_depressed { background-image: url("img/green-button-depressed.gif") }

<img border='0' class="green" id="image1" src="img/1x1.gif" onclick="return doClick(this, event);">
<script>
hX.addComponent("image1", new hX.JSFImage());
</script>

使用 CSS 对 JSF 按钮添加鼠标悬停效果(突出显示)

<style>
.button, .button_moused {
    border-width: 2px;
    border-style: solid;
    border-color: black;
    color: black;
    font-weight: normal;
    width: 100px;
}
.button_moused {
    border-color: blue;
    font-weight: bold;
}
	</style>

<hx:commandExButton type="submit" styleClass="button" id="button1"></hx:commandExButton>
<script>
hX.addComponent("form1:button1", new hX.JSFImage());
</script>

对 HTML 按钮添加鼠标悬停图像、鼠标按下图像、禁用图像、标签和图标。

<style>
<script>
.button4a, .button4a_moused, .button4a_depressed {
    width:100px;
    height:21px;
}
.button4a_Label, .button4a_Label_moused, .button4a_Label_depressed {
    font-family: sans-serif;
    color: black;
    font-size: 14px;
    text-align: left;
    margin-left: 24px;
}
.button4a_Label_depressed { margin-left:25px; margin-top:2px; }
.button4a_Icon, .button4a_Icon_moused, .button4a_Icon_depressed {
    text-align: left;
    margin-left: 4px;
    height: 17px;
    width: 17px;
    background-repeat: no-repeat;
}
.button4a_Icon_depressed { margin-top:2px; margin-left:5px; }
</script>
<input type="image" class="button4a" id="button2" name="form1:text21" alt="Search" title="Search" />
<script>
hX.addComponent("form1:button2", new hX.JSFImage("icon-normal:img/search-icon.gif",
                "icon-moused:img/search-icon-moused.gif", "normal:img/search-button.gif",
                "moused:img/search-button-moused.gif", "depressed:img/search-button-depressed.gif",
                "label:search"));
</script>

反馈