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>

编译运行后如下：

移动鼠标到上面：

移开鼠标后：

完整示例下载：http://files.cnblogs.com/Terrylee/HoverBehaviorDemo.rar
作者：TerryLee
出处：http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
posted @ 2006-09-01 08:28 TerryLee 阅读(2000) 评论(4)  编辑 收藏 网摘 所属分类: [08]  Web开发

  回复  引用    
#1楼 2006-10-12 19:49 | 海东青[匿名] [未注册用户]
只用到了<hover>和<unhover>
那两个属性没有使,有什么功能呢?

  回复  引用  查看    
#2楼 [楼主]2006-10-14 11:47 | TerryLee      
@海东青[匿名]
绑定数据和一个事件
  回复  引用    
#3楼 2007-01-17 00:34 | snyod [未注册用户]
代表党(.NET平台)感谢您.
全部收藏...............
  回复  引用    
#4楼 2007-05-21 21:25 | sohbet [未注册用户]
d d d d d d dd
标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

相关文章:

相关链接:

最新IT新闻:
Google操作系统已开始内部测试？
Google阅读器界面升级 全新改版
微软官方下载：Windows Vista SP2 Beta测试版
微软发布PC Live单机游戏客户端
Firefox遭“独家”恶意软件攻击