星空网 > 软件开发 > ajax

Atlas学习手记(20):客户端简单控件示例

上一篇简单介绍了Atlas的客户端控件,都是一些理论性的东西,显得有些枯燥。本文以Button控件为示例,看一下客户端简单控件的一些使用。

 

主要内容

1.Button控件示例

 

上一篇简单介绍了Atlas的客户端控件,都是一些理论性的东西,显得有些枯燥。本文以Button控件为示例,看一下客户端简单控件的一些使用。前面说过,Atlas将DOM元素中的Button概念扩展,使Button不单单指type为button或submit的HTML input元素,还可以应用到例如span,a等元素上,提供开发人员统一的编程接口。

1.添加Input,Button,a,span四个DOM元素:

Atlas学习手记(20):客户端简单控件示例<input id="button1" type="button" value="Button 1" /> <br />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例<button id="button2" type="button">Button 2</button> <br />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例<a id="button3" href="#">Buttron 3</a> <br />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例<span id="button4" class="pseudo-button">Button4</span>

分别表示为Button1,Button2,Button3,Button4。再添加一个Span用来显示单击按钮后的结果:

Atlas学习手记(20):客户端简单控件示例<span id="result"></span>

2.添加Atlas客户端控件:

前面说过,Sys.Component是所有的Atlas客户端控件的抽象基类,而所有的控件都有一个ID属性,它的解释为Atlas组件的标识符,将Atlas客户端组件与DOM元素连接起来。这个id值与DOM元素的id属性值相同,Atlas使用这个id以找到相关的DOM元素。

添加一个Atlas的Label控件,设置它的ID与我们上面的Span ID一致:

Atlas学习手记(20):客户端简单控件示例<label id="result" />

前三个Button我们只是加上Click,而对第四个Button还加上了hoverBehavior,分别设置参数如下:

Atlas学习手记(20):客户端简单控件示例Atlas学习手记(20):客户端简单控件示例<script type="text/>Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    <page ="http://schemas.microsoft.com/" ="samples">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        <components>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            <label id="result" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            <button id="button1">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                <click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    <setProperty target="result" property="text" value="button1 (input)" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                </click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            </button>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            <button id="button2">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                <click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    <setProperty target="result" property="text" value="button2 (button)" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                </click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            </button>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            <button id="button3">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                <click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    <setProperty target="result" property="text" value="button3 (hyperlink)" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                </click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            </button>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            <button id="button4">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                <click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    <setProperty target="result" property="text" value="button4 (span)" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                </click>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                <behaviors>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    <hoverBehavior>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                        <hover>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                            <invokeMethod target="button4" method="addCssClass">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                                <parameters className="pseudo-button-hover" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                            </invokeMethod>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                        </hover>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                        <unhover>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                            <invokeMethod target="button4" method="removeCssClass">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                                <parameters className="pseudo-button-hover" />
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                            </invokeMethod>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                        </unhover>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                    </hoverBehavior>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例                </behaviors>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例            </button>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        </components>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    </page>
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例</script>

这里的参数很简单,有关的方法和属性可以参考前一篇文章。其中用的CSS样式:

Atlas学习手记(20):客户端简单控件示例<style type="text/css">
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例Atlas学习手记(20):客户端简单控件示例    .double-spaced {Atlas学习手记(20):客户端简单控件示例}{
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        line-height: 200%;
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    }
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例Atlas学习手记(20):客户端简单控件示例    .pseudo-button {Atlas学习手记(20):客户端简单控件示例}{
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        border: solid 1px; 
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        padding: 3px;
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        background: lightyellow; 
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    }
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例Atlas学习手记(20):客户端简单控件示例    .pseudo-button-hover {Atlas学习手记(20):客户端简单控件示例}{
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例        background: lightgreen;
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例    }
Atlas学习手记(20):客户端简单控件示例
Atlas学习手记(20):客户端简单控件示例</style>

运行后如下:

Atlas学习手记(20):客户端简单控件示例

单击Button1后:

Atlas学习手记(20):客户端简单控件示例

鼠标移动到Button4上:

Atlas学习手记(20):客户端简单控件示例

单击Button4后:

Atlas学习手记(20):客户端简单控件示例

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

原标题:Atlas学习手记(20):客户端简单控件示例

关键词:atlas

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

客户案例 | 中国至墨西哥精密仪器空运运输 :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
Noon进军食品配送市场惨遭嫌弃?!降低佣金不被市场看好:https://www.goluckyvip.com/news/10863.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流