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 >

编译运行后如下：

移动鼠标到上面：

移开鼠标后：

完整示例下载