zoukankan      html  css  js  c++  java
  • Atlas学习手记(21):使用行为增强用户界面(一):Click Behavior

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

    Click BehaviorAtlas内建的Behavior,用来处理DHTMLonclick事件。

     

    主要内容

    1Click Behavior简介

    2.完整示例

     

    一.概述

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

    Click BehaviorAtlas内建的Behavior,用来处理DHTMLonclick事件。它的基本定义形式如下:

    <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>

    二.完整示例

    下面看一个简单的示例,在ASPX页面上添加两个Span分别用来HideShow的点击,再用一个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>&nbsp; <span id="showLabel"

            class
    ="buttonstyle2">Show</span>

    </div>

    其中用到的CSS样式如下:

    <style type="text/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,分别用来表示HideShow,另外在Click Behavior中用到了setProperty这个Action,来设置这个Panel是否显示:

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

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

            
    <components>

             
    <control id="panel" cssClass="start" />

                        
    <label id="hideLabel">

                            
    <behaviors>

                                
    <clickBehavior>

                                    
    <click>

                                        
    <setProperty target="panel" property="visible" value="false" />

                                    
    </click>   

                                
    </clickBehavior> 

                            
    </behaviors>

                        
    </label>

                        
    <label id="showLabel">

                            
    <behaviors>

                                
    <clickBehavior>

                                    
    <click>

                                        
    <setProperty target="panel" property="visible" value="true" />

                                    
    </click>   

                                
    </clickBehavior> 

                            
    </behaviors>

                        
    </label>

            
    </components>

        
    </page>

    </script>

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

    单击“Hide”:

    单击“Show”:

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

  • 相关阅读:
    caffe常用层: batchNorm层和scale层
    简述configure、pkg-config、pkg_config_path三者的关系
    python删除list中元素的三种方法
    Leetcode 872. Leaf-Similar Trees
    Leetcode 508. Most Frequent Subtree Sum
    Leetcode 572. Subtree of Another Tree
    Leetcode 894. All Possible Full Binary Trees
    Leetcode 814. Binary Tree Pruning
    Leetcode 557. Reverse Words in a String III
    python 多维list声明时的小问题
  • 原文地址:https://www.cnblogs.com/Terrylee/p/Atlas_Click_Behavior.html
Copyright © 2011-2022 走看看