zoukankan      html  css  js  c++  java
  • Atlas学习手记(20):客户端简单控件示例

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

     

    主要内容

    1Button控件示例

     

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

    1.添加InputButtonaspan四个DOM元素:

    <input id="button1" type="button" value="Button 1" /> <br />

    <button id="button2" type="button">Button 2</button> <br />

    <id="button3" href="#">Buttron 3</a> <br />

    <span id="button4" class="pseudo-button">Button4</span>

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

    <span id="result"></span>

    2.添加Atlas客户端控件:

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

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

    <label id="result" />

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

    <script type="text/xml-script">

        
    <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:samples="samples">

            
    <components>

                
    <label id="result" />

                
    <button id="button1">

                    
    <click>

                        
    <setProperty target="result" property="text" value="button1 (input)" />

                    
    </click>

                
    </button>

                
    <button id="button2">

                    
    <click>

                        
    <setProperty target="result" property="text" value="button2 (button)" />

                    
    </click>

                
    </button>

                
    <button id="button3">

                    
    <click>

                        
    <setProperty target="result" property="text" value="button3 (hyperlink)" />

                    
    </click>

                
    </button>

                
    <button id="button4">

                    
    <click>

                        
    <setProperty target="result" property="text" value="button4 (span)" />

                    
    </click>

                    
    <behaviors>

                        
    <hoverBehavior>

                            
    <hover>

                                
    <invokeMethod target="button4" method="addCssClass">

                                    
    <parameters className="pseudo-button-hover" />

                                
    </invokeMethod>

                            
    </hover>

                            
    <unhover>

                                
    <invokeMethod target="button4" method="removeCssClass">

                                    
    <parameters className="pseudo-button-hover" />

                                
    </invokeMethod>

                            
    </unhover>

                        
    </hoverBehavior>

                    
    </behaviors>

                
    </button>

            
    </components>

        
    </page>

    </script>

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

    <style type="text/css">

        .double-spaced 
    {

            line-height
    : 200%;

        
    }


        

        .pseudo-button 
    {

            border
    : solid 1px; 

            padding
    : 3px;

            background
    : lightyellow; 

        
    }


        

        .pseudo-button-hover 
    {

            background
    : lightgreen;

        
    }


    </style>

    运行后如下:

    单击Button1后:

    鼠标移动到Button4上:

    单击Button4后:

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

  • 相关阅读:
    uniapp解决图形验证码问题及arraybuffer二进制转base64格式图片
    uni-app图片上传接口联调
    Redis与Mysql双写一致性方案解析(转载)
    python 3 for循环倒序、一组数据参数解包
    python使用for循环打印直角三角形、菱形、乘法口诀,1至100的和、奇数和、偶数和
    使用jmeter做接口测试,简单实例
    python发送无参数get请求
    python的第三方库unittestreport 详细功能使用文档(V1.1.1)-转载
    python 3 发送邮件(转载)
    python使用apscheduler执行定时任务时报错:Run time of job "pr (trigger: cron[minute='25'], next run at: 2021-05-05 22:25:00 CST)" was missed by 0:00:01.185258
  • 原文地址:https://www.cnblogs.com/Terrylee/p/Atlas_Client_Simple_Control_Sample.html
Copyright © 2011-2022 走看看