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

    Popup Behavior提供了Popup的功能,可以用来实现高级的Tooltip

     

    主要内容

    1Popup Behavior简介

    2.完整示例

     

    一.Popup Behavior简介

    Popup Behavior提供了Popup的功能,可以用来实现高级的Tooltip。简单示例代码:

    <popupBehavior

        
    dataContext="source for data binding operations"

        id
    ="identifier for looking up the component by name"

        parentElement
    ="DOM element used as anchor for popup"

        positioningMode
    ="Absolute|Center|BottomLeft|BottomRight|TopLeft|TopRight"

        x
    ="0"

        y
    ="0"

    > 

        
    <bindings>

            
    <!-- bindings -->

        
    </bindings>

        
    <propertyChanged>

            
    <!-- other actions -->

        
    </propertyChanged>

    </popupBehavior>

    其中positioningMode指定了Popup元素显示的位置。

    二.完整示例

    看一个完整的示例,这里用Popup Behavior和前面说过的Hover Behavior来实现一个Drop-Down Box。在ASPX页面中先加入HTML元素:

    <div>
        
    <h3>
            Popup Behavior Example
    </h3>

        What is the definition of a 
    <id="hoverLink" class="hoverlabel">word</a>?

        
    <div id="popup" style="visibility: hidden; display: none; border: solid 1px black;

            background-color: Yellow;"
    >

            A sound or a combination of sounds.

        
    </div>

    </div>

    用到的CSS如下:

    <style type="text/css">

        .hoverlabel 
    {

            CURSOR
    : pointer; BACKGROUND-COLOR: #00dd00

        
    }


    </style>

    编写Atlas脚本,注意popupBehavior加在了Div元素上,而hoverBehavior加在了HyperLink上并使用了ShowHide方法。

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

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

            
    <components>

                
    <control id="popup">

                    
    <behaviors>

                        
    <popupBehavior id="popupBehavior" parentElement="hoverLink" positioningMode="BottomLeft"/>

                    
    </behaviors>

                
    </control>

     

                
    <hyperLink id="hoverLink">

                    
    <behaviors>

                        
    <hoverBehavior unhoverDelay="1000" hoverElement="popup">

                            
    <hover>

                                
    <invokeMethod target="popupBehavior" method="show"/>

                            
    </hover>

                            
    <unhover>

                                
    <invokeMethod target="popupBehavior" method="hide"/>

                            
    </unhover>

                        
    </hoverBehavior>

                    
    </behaviors>

                
    </hyperLink>

            
    </components>

        
    </page>

    </script>

    运行后如下:

    当鼠标移动到“word”上后:

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

  • 相关阅读:
    【Delphi】MD5算法(二):应用
    迅雷不能下载FlashPlayer,下载后自动删除,狂汗!!!
    工作笔记1
    GridControl 获取筛选后的数据{笔记}
    Invoke与BeginInvoke[转]
    这几项能力不知道要几年
    你永远不要去做的事1【译】
    window环境变量——心得【转】
    刚做好的网站客服系统,欢迎大家测试
    .Net 2.0里有一个有用的新功能:迭代器
  • 原文地址:https://www.cnblogs.com/Terrylee/p/Atlas_Popup_Behavior.html
Copyright © 2011-2022 走看看