Atlas学习手记（21）：使用行为增强用户界面（一）：Click Behavior

Atlas中的Behavior定义了当控件的某个事件被触发时的行为。Behavior可以看作是一种封装了的DHTML的事件，例如click和hover等。Behavior同样可以是一个组件，可被attach到某个Atlas客户端控件上，以提供这个Atlas客户端控件更高级，更丰富的功能，例如一些复杂的拖放（drag & drop），自动完成，浮动等功能。Behavior将被定义在某个Atlas控件的behaviors集合中。

Click Behavior是Atlas内建的Behavior，用来处理DHTML的onclick事件。

主要内容[/b]

1．Click Behavior简介

2．完整示例

一．概述[/b]

Atlas中的Behavior定义了当控件的某个事件被触发时的行为。Behavior可以看作是一种封装了的DHTML的事件，例如click和hover等。Behavior同样可以是一个组件，可被attach到某个Atlas客户端控件上，以提供这个Atlas客户端控件更高级，更丰富的功能，例如一些复杂的拖放（drag & drop），自动完成，浮动等功能。Behavior将被定义在某个Atlas控件的behaviors集合中。

Click Behavior是Atlas内建的Behavior，用来处理DHTML的onclick事件。它的基本定义形式如下：

<clickbehavior

click="event handler"

datacontext="source for data binding operations"

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

propertychanged="event handler">

<bindings>

<!-- bindings -->

</bindings>

<click>

<!-- actions -->

</click>

<propertyChanged>

<!-- actions -->

</propertyChanged>

</clickbehavior>
二．完整示例[/b]

下面看一个简单的示例，在ASPX页面上添加两个Span分别用来Hide和Show的点击，再用一个div来显示点击的结果：

<div>

<h3 style="text-decoration: underline">

Click Behavior Example</h3>

<div id="panel">

The clickBehavior of the following elements affect this element.</div>

<br />

<span id="hideLabel" class="buttonstyle2">Hide</span>  <span id="showLabel"

class="buttonstyle2">Show</span>

</div>
其中用到的CSS样式如下：

</style>
下面添加Atlas脚本定义，注意我们要添加两个Click Behavior，分别用来表示Hide和Show，另外在Click Behavior中用到了setProperty这个Action，来设置这个Panel是否显示：

</script>
至此全部完成，运行后如下所示：



单击“Hide”：



单击“Show”：



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