星空网 > 软件开发 > ajax

Atlas学习手记(21):使用行为增强用户界面

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.完整示例

 

一.概述

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

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

Atlas学习手记(21):使用行为增强用户界面<clickbehavior 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    click="event handler" 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    datacontext="source for data binding operations"
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    id="identifier for looking up the component by name" 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    propertychanged="event handler">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <bindings>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        <!-- bindings -->
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    </bindings>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <click>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        <!-- actions -->
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    </click>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <propertyChanged>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        <!-- actions -->
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    </propertyChanged>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面</clickbehavior>

二.完整示例

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

Atlas学习手记(21):使用行为增强用户界面<div>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <h3 style="text-decoration: underline">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        Click Behavior Example</h3>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <div id="panel">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        The clickBehavior of the following elements affect this element.</div>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <br />
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <span id="hideLabel" class="buttonstyle2">Hide</span>&nbsp; <span id="showLabel"
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        class="buttonstyle2">Show</span>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面</div>

其中用到的CSS样式如下:

Atlas学习手记(21):使用行为增强用户界面Atlas学习手记(21):使用行为增强用户界面<style type="text/css">Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面Atlas学习手记(21):使用行为增强用户界面    .buttonstyle2 {Atlas学习手记(21):使用行为增强用户界面}{
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        PADDING-RIGHT: 4px; PADDING-LEFT: 4px; 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        FONT-SIZE: 12pt; PADDING-BOTTOM: 4px; 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        MARGIN: 4px; VERTICAL-ALIGN: middle; 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        COLOR: white; PADDING-TOP: 4px; 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        FONT-FAMILY: Verdana; BACKGROUND-COLOR: gray; 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        TEXT-ALIGN: center
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    }
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面Atlas学习手记(21):使用行为增强用户界面    .start{Atlas学习手记(21):使用行为增强用户界面}{background-color:yellow;border:dashed 2px black;}
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面</style>

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

Atlas学习手记(21):使用行为增强用户界面Atlas学习手记(21):使用行为增强用户界面<script type="text/>Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    <page ="http://schemas.microsoft.com/">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        <components>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面         <control id="panel" cssClass="start" />
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                    <label id="hideLabel">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                        <behaviors>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                            <clickBehavior>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                <click>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                    <setProperty target="panel" property="visible" value="false" />
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                </click>   
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                            </clickBehavior> 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                        </behaviors>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                    </label>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                    <label id="showLabel">
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                        <behaviors>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                            <clickBehavior>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                <click>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                    <setProperty target="panel" property="visible" value="true" />
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                                </click>   
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                            </clickBehavior> 
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                        </behaviors>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面                    </label>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面        </components>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面    </page>
Atlas学习手记(21):使用行为增强用户界面
Atlas学习手记(21):使用行为增强用户界面</script>

至此全部完成,运行后如下所示:

Atlas学习手记(21):使用行为增强用户界面

单击“Hide”:

Atlas学习手记(21):使用行为增强用户界面

单击“Show”:

Atlas学习手记(21):使用行为增强用户界面

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

原标题:Atlas学习手记(21):使用行为增强用户界面

关键词:atlas

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

布局东南亚!Temu或将上线更多站点 :https://www.goluckyvip.com/news/10858.html
客户案例 | 中国至墨西哥精密仪器空运运输 :https://www.goluckyvip.com/news/10859.html
中国物流中心即将落户德国威廉港:https://www.goluckyvip.com/news/1086.html
需求锐减!三大航线运费持续下跌 :https://www.goluckyvip.com/news/10860.html
聚焦物流大事件 | 巴拿马运河或面临长期干旱! :https://www.goluckyvip.com/news/10861.html
Newegg国际商城的物流方式_Newegg国际商城的物流服务:https://www.goluckyvip.com/news/10862.html
永康白云风景区怎么走 白云山风景区怎么去??:https://www.vstour.cn/a/363181.html
2022世界杯门票如何买?:https://www.vstour.cn/a/363182.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流