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

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

主要内容

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>

编译运行后如下：

移动鼠标到上面：

移开鼠标后：

完整示例下载