Atlas学习手记（24）：使用行为增强用户界面（四）：Popup Behavior

Popup Behavior提供了Popup的功能，可以用来实现高级的Tooltip。

主要内容[/b]

1．Popup Behavior简介

2．完整示例

一．Popup Behavior简介[/b]

Popup Behavior提供了Popup的功能，可以用来实现高级的Tooltip。简单示例代码：

<popupBehavior

dataContext="source for data binding operations"

id="identifier for looking up the component by name"

parentElement="DOM element used as anchor for popup"

positioningMode="Absolute|Center|BottomLeft|BottomRight|TopLeft|TopRight"

x="0"

y="0"

>

<bindings>

<!-- bindings -->

</bindings>

<propertyChanged>

<!-- other actions -->

</propertyChanged>

</popupBehavior>
其中positioningMode指定了Popup元素显示的位置。

二．完整示例[/b]

看一个完整的示例，这里用Popup Behavior和前面说过的Hover Behavior来实现一个Drop-Down Box。在ASPX页面中先加入HTML元素：

<div>
<h3>
Popup Behavior Example</h3>

What is the definition of a <a id="hoverLink" class="hoverlabel">word</a>?

<div id="popup" style="visibility: hidden; display: none; border: solid 1px black;

background-color: Yellow;">

A sound or a combination of sounds.

</div>

</div>
用到的CSS如下：

</style>
编写Atlas脚本，注意popupBehavior加在了Div元素上，而hoverBehavior加在了HyperLink上并使用了Show和Hide方法。

</script>
运行后如下：



当鼠标移动到“word”上后：



完整示例下载：http://files.cnblogs.com/Terrylee/PopupBehaviorDemo.rar