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

---

本文示例源代码或素材下载

　　主要内容

　　1．Hover Behavior简介

　　2．完整示例

　　一．Hover Behavior简介

　　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>

　　二．完整示例

　　看一个完整的示例，新建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 type="text/xml-script">
　　<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
　　　　<components><control id="panel2" cssClass="start">
　　　　　　　　<behaviors>
　　　　　　　　　　<hoverBehavior unhoverDelay="500">
　　　　　　　　　　　　<hover>
　　　　　　　　　　　　　　<setProperty target="panel2" property="cssClass" value="hover"/>
　　　　　　　　　　　　</hover>
　　　　　　　　　　　　<unhover>
　　　　　　　　　　　　　　<setProperty target="panel2" property="cssClass" value="start"/>
　　　　　　　　　　　　</unhover>
　　　　　　　　　　</hoverBehavior>
　　　　　　　　</behaviors>
　　　　　　</control>
　　　　</components>
　　</page>
</script>

　　用到的CSS样式如下：

<style type="text/css">
　　.start{}{background-color:lightyellow;
　　　　border:dashed 2px black;}
　　.hover{}{font-size:20pt;
　　　　background-color:lightgreen;
　　　　border:dashed 2px black;}
</style>

　　编译运行后如下：

　　移动鼠标到上面：

　　移开鼠标后：

本文作者:

---

« 
» 

---