zoukankan      html  css  js  c++  java
  • Atlas学习手记(23):使用行为增强用户界面(三):Hover Behavior

    Hover Behavior提供了对DHTML的事件onmouseoveronmouseoutonfocus以及onblur的处理。

     

    主要内容

    1Hover Behavior简介

    2.完整示例

     

    一.Hover Behavior简介

    Hover Behavior提供了对DHTML的事件onmouseoveronmouseoutonfocus以及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>

    编译运行后如下:

    移动鼠标到上面:

    移开鼠标后:

    完整示例下载:https://files.cnblogs.com/Terrylee/HoverBehaviorDemo.rar
  • 相关阅读:
    百度mp3地址解密码
    VB 在EXE后附加信息
    截屏函数
    Base64和StrToByte
    The Android ION memory allocator, DMABUF is mentioned as well
    DDC EDID 介绍
    Memory management for graphic processors TTM的由来
    科普 写display driver的必看 How video card works [2D的四种主要操作]
    GEM vs TTM
    DMABUF 背景介绍文章 Sharing buffers between devices
  • 原文地址:https://www.cnblogs.com/Terrylee/p/Atlas_Hover_Behavior.html
Copyright © 2011-2022 走看看