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事件。

主要内容

1．Click Behavior简介

2．完整示例

一．概述

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>

<click>

</click>

</propertyChanged>

</clickbehavior>

二．完整示例

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

<div>

Click Behavior Example</h3>

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样式如下：

.buttonstyle2 {

}{

PADDING-RIGHT: 4px; PADDING-LEFT: 4px;

FONT-SIZE: 12pt; PADDING-BOTTOM: 4px;

MARGIN: 4px; VERTICAL-ALIGN: middle;

COLOR: white; PADDING-TOP: 4px;

FONT-FAMILY: Verdana; BACKGROUND-COLOR: gray;

TEXT-ALIGN: center

}

.start{

}{background-color:yellow;border:dashed 2px black;}

</style>

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

<click>

</click>

</clickBehavior>

</behaviors>

</label>

<click>

</click>

</clickBehavior>

</behaviors>

</label>

</components>

</page>

</script>

至此全部完成，运行后如下所示：

单击“Hide”：

单击“Show”：

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

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

Atlas学习手记（5）：使用服务端定时控件TimerControl
摘要:TimerControl是一个用于服务器端定时器的控件,可用来实时显示数据等,在很多地方都有应用,本文将简单介绍一下TimerControl的使用. 主要内容 1．TimerControl介绍 ...
Atlas学习手记（9）：异步调用Page Method
使用Atlas我们可以调用两种服务端的方法WebService Method和Page Method,在前面的使用中,我们一直都是调用WebService Method,如何去调用一个Page Met ...
Atlas学习手记（15）：使用RoundedCorners为控件加上圆角效果
RoundedCorners是AtlasControlToolkit中的一个Extender,利用它可以轻松地为ASP.NET中的控件加上圆角效果. 主要内容 1．RoundedCorners介绍 2 ...
AM335X的汇编语言与c语言,X86汇编语言学习手记 -- 汇编和C协同
X86汇编语言学习手记(3) 2004年12月在X86汇编语言学习手记(1)(2)中,可以看到栈(Stack)作为进程执行过程中数据的临时存储区域,通常包含如下几类数据: 局部变量函数调用的返回地 ...
ExtJS MVC 学习手记3
在演示应用中,我们已经创建好了viewport,并为之添加了一个菜单树.但也仅仅是这样,点击树或应用的其他地方获得不到任何响应.这个演示应用还是一个死的应用. 接下来,我们让这个应用活起来. 首先,给 ...
R语言学习手记 (1)
R语言学习手记 (1) 经管的会计和财管都会学数据统计与分析R语言这门课,加上我也有点兴趣,就提前选了这门课,以下的笔记由老师上课的PPT.<R语言编程艺术>和<R语言数据科学> ...
webpack入门学习手记（一）
本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...
ASP.NET Atlas学习团队建议收集
请在这里留下您对ASP.NET Atlas学习团队的宝贵意见和建议,让我们一起把它办得更好! 申请加入,请在http://dflying.cnblogs.com/archive/2006/05/09/ ...
ROS学习手记 - 2.1: Create and Build ROS Package 生成包（Python）
ROS学习手记 - 2.1: Create and Build ROS Package 生成包(Python) ROS学习手记 - 2.1: Create and Build ROS Package ...
uni-app官方教程学习手记
本人微信公众号:前端修炼之路,欢迎关注背景介绍大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...

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

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

最新文章

热门文章