Atlas学习手记(23):使用行为增强用户界面(三):Hover Behavior
2008-03-25 11:24
507 查看
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>
用到的CSS样式如下:
</style>
编译运行后如下:
移动鼠标到上面:
移开鼠标后:
完整示例下载
主要内容
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>
用到的CSS样式如下:
</style>
编译运行后如下:
移动鼠标到上面:
移开鼠标后:
完整示例下载
相关文章推荐
- Atlas学习手记(23):使用行为增强用户界面(三):Hover Behavior
- Atlas学习手记(21):使用行为增强用户界面(一):Click Behavior
- Atlas学习手记(22):使用行为增强用户界面(二):Floating Behavior
- Atlas学习手记(21):使用行为增强用户界面(一):Click Behavior
- Atlas学习手记(24):使用行为增强用户界面(四):Popup Behavior
- Atlas学习手记(25):使用行为增强用户界面(五):AutoComplete Behavior
- Atlas学习手记(22):使用行为增强用户界面(二):Floating Behavior
- Atlas学习手记(24):使用行为增强用户界面(四):Popup Behavior
- Atlas学习手记(25):使用行为增强用户界面(五):AutoComplete Behavior
- Atlas学习手记(13):使用TextBoxWatermark为TextBox加上水印效果
- Atlas学习手记(26):使用Validators验证用户输入
- Atlas学习手记(14):使用ToggleButton Extender来装扮CheckBox
- Atlas学习手记(6):使用Atlas UpdateProgress控件
- Atlas学习手记(6):使用Atlas UpdateProgress控件
- Atlas学习手记(12):使用CascadingDropDown控件
- Atlas学习手记(15):使用RoundedCorners为控件加上圆角效果
- Atlas学习手记(10):使用AlwaysVisibleControl Extender
- Atlas学习手记(15):使用RoundedCorners为控件加上圆角效果
- Atlas学习手记(12):使用CascadingDropDown控件
- Atlas学习手记(7):使用DragOverlayExtender实现拖放功能