Atlas学习手记(23):使用行为增强用户界面(三):HoverBehavior

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

 

主要内容

1．Hover Behavior简介

2．完整示例

 

一．Hover Behavior简介

Hover Behavior提供了对DHTML的事件onmouseover，onmouseout，onfocus以及onblur的处理。简单示例代码：    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/>    <page ="http://schemas.microsoft.com/">        <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>

编译运行后如下：

移动鼠标到上面：

移开鼠标后：

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

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：Atlas学习手记(23):使用行为增强用户界面(三):HoverBehavior

关键词：atlas