Atlas学习手记（24）：使用行为增强用户界面（四）：Popup Behavior

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

 

主要内容

1．Popup 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 <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上并使用了Show和Hide方法。

<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”上后：

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

作者：TerryLee
出处：http://terrylee.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
posted @ 2006-09-01 08:32 TerryLee 阅读(2221) 评论(4)  编辑 收藏 网摘 所属分类: [08]  Web开发

  回复  引用    
#1楼 2006-09-21 12:53 | catrayu [未注册用户]
为什么运行后的页面,当鼠标 在hoverLink与popup(绿色与黄色)之间不停移动,
popup的div的宽度会不断缩小?
  回复  引用    
#2楼 2006-11-17 12:07 | ben[匿名] [未注册用户]
同以下的问题，这个bug好搞阿
  回复  引用  查看    
#3楼 [楼主]2006-11-18 18:12 | TerryLee      
@ben[匿名]
现在已经用ASP.NET AJAX Beta2了，这些文章可能已经不再适用了
  回复  引用    
#4楼 2007-01-17 00:34 | snyod [未注册用户]
代表党(.NET平台)感谢您.
全部收藏..............
标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

人才

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
Google站内搜索

相关文章:

相关链接:

最新IT新闻:
Google操作系统已开始内部测试？
Google阅读器界面升级 全新改版
微软官方下载：Windows Vista SP2 Beta测试版
微软发布PC Live单机游戏客户端
Firefox遭“独家”恶意软件攻击