Atlas学习手记（23）：使用行为增强用户界面（三）：Hover Behavior

Hover Behavior提供了对DHTML的事件onmouseover，onmouseout，onfocus以及onblur的处理。

主要内容[/b]

1．Hover Behavior简介

2．完整示例

一．Hover Behavior简介[/b]

Hover Behavior提供了对DHTML的事件onmouseover，onmouseout，onfocus以及onblur的处理。简单示例代码：

<hoverBehavior

dataContext="source for data binding operations"

hoverElement="ID of element the hover behavior is attached to"

id="identifier for looking up the component by name"

propertyChanged="event handler"

unhoverDelay="0|delay before unhover event in ms"

>

<bindings>

<!-- bindings -->

</bindings>

<hover>

<!-- actions -->

</hover>

<propertyChanged>

<!-- actions -->

</propertyChanged>

<unhover>

<!-- actions -->

</unhover>

</hoverBehavior>
二．完整示例[/b]

看一个完整的示例，新建Atlas Web Site后，在ASPX页面中放一个Div，当鼠标移动到它上面时背景颜色变为浅绿色：

<div>

<h3 style="text-decoration:underline">Hover Behavior Example</h3>

<div id="panel2">This element is associated to the hoverBehavior.</div>

</div>
然后编写Atlas脚本，这里也用到了setProperty这个Action，来为控件添加CSS样式，还有注意一下unhoverDelay属性，设置延迟时间：

</script>
用到的CSS样式如下：

</style>
编译运行后如下：



移动鼠标到上面：



移开鼠标后：



完整示例下载：http://files.cnblogs.com/Terrylee/HoverBehaviorDemo.rar