Flex 框架包含了一个PopUpManager 类,它包含了若干静态方法来管理穿件,放置,移除Flex
应用程序的顶级窗口。如下代码所示:
Code View:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas horizontalCenter="0" verticalCenter="0">
<mx:LinkButton label="Top" x="100" y="10" click="showDetail(event)"/>
<mx:LinkButton label="Left" x="10" y="100" click="showDetail(event)"/>
<mx:LinkButton label="Bottom" x="100" y="200" click="showDetail(event)"/>
<mx:LinkButton label="Right" x="200" y="100" click="showDetail(event)"/>
<mx:Canvas width="100" height="100" x="125" y="40" backgroundColor="#ffffff" rotation="45">
</mx:Canvas>
</mx:Canvas>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private const POPUP_OFFSET:int = 10;
private function showDetail(evt:MouseEvent):void {
// 创建PopUp
var popup:CustomPopUp =
CustomPopUp(PopUpManager.createPopUp(this, CustomPopUp , false));
popup.message = "This is the detail for " + evt.target.label;
// popup定位
var pt:Point = new Point(0, 0);
// 从组件内部坐标空间转换到全局坐标空间。
pt = evt.target.localToGlobal(pt);
popup.x = pt.x + POPUP_OFFSET;
popup.y = pt.y + evt.target.height + POPUP_OFFSET;
}
]]>
</mx:Script>
</mx:Application>
在这个例子中,一系列的LinkButton 控件被创建并被绝对定位放置在Canvas 中。当用户点
击了一个LinkButton,一个弹出窗口会显示用来为用户显示详细信息。LinkButton 控件的
click 事件被连接到showDetail 方法上。showDetail 方法使用了PopUpManager 的createPopUp
方法来创建了一个自定义组件CustomPopUp 的实例。然后弹出窗口的message 属性被赋值
成需要被显示给用户的值。最后,弹出窗口被相对定位到发起初始请求的LinkButton。
LinkButton 左上角的(LinkButton 的坐标内,x=0,y=0),会被localToGlobal 方法从组件内
部坐标空间装换到全局坐标空间。这个转换方法在所有的显示元件和他们的子类都可用。
CustomPopUp 类代码如下所示:
Code View:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="300" height="50"
styleName="customPopUp"
showCloseButton="true"
close="handleClose(event)"
mouseMove="aa(event)">
<!--popup的关闭触发事件必须写在自定义控件上 -->
<mx:Style>
.customPopUp {
header-height:2;
padding-left:5;
padding-right:5;
padding-top:5;
padding-bottom:5;
border-color:#000000;
border-alpha:.5;
border-thickness-left:5;
border-thickness-right:5;
border-thickness-bottom:5;
border-thickness-top:5;
background-color:#666666;
color:#ffffff;
}
</mx:Style>
<mx:Text width="100%" height="100%" text="{message}"/>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.events.CloseEvent;
[Bindable]
public var message:String;
private function handleClose(evt:CloseEvent):void {
PopUpManager.removePopUp(this);
}
public function aa(evt:MouseEvent):void{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
</mx:TitleWindow>
CustomPopUp 类继承于TitleWindow 类,并且添加了一个Text 控件用来显示信息。当通过
PopUpManager 的removePopUp 方法来关闭弹出窗口时,TitleWindow 的close 事件被指向
到handleClose 方法。上面的代码还包含了自定义CustomPopUp 显示的CSS 风格。
分享到:
相关推荐
popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框popup 弹出框
jQuery popup javascript 弹出窗口 可遮盖IE6的select 点击其它地方自动隐藏 兼容IE,FF等浏览器
实现弹出窗口与主界面的分离,只要点击弹出窗口的其他部分就可以关闭弹出窗口。
使用ArcGISAPI实现多个弹窗弹出;多个Popup窗体弹出,亲测可用。
popup.js是一款使用jQuery和CSS3制作并可以使用鼠标进行互动的3D弹出窗口插件。该3D弹出窗口插件使用简单,并且在旧的浏览器中会回退为非3D状态,兼容IE8+的所有现代浏览器。
jquery.popup 弹出层选择 提示
今天用pop的弹出窗口里,出现一个问题,当网页出现滚动条里,不能遮挡住,解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
popup, MSN 风格的消息弹出窗口。很适合ASP.NET下使用。 用过的都知道。:-) 包括C#代码,和VB.net代码
用jquery做弹出框popup时需要的参数的名称、类别、描述等
QML弹出窗口组件,灯箱效果、动画效果,可拖拽 核心思路:一个mask层,一个最顶层,都用rectangle,禁止事件穿透,动画效果 http://www.cnblogs.com/surfsky/p/3998391.html
动态显示popup,定时关闭
基于国外的 MacPopup 苹果风格,自己很喜欢,但是国外提供的 该控件 是基于flex 3的 ,所以在目前flex4为主流的 sdk 情况下,会出现错误。本控件 已经做了修正。可以直接运行。请指导。
jQuery 通用dialog/popup弹出层,提示窗口插件,包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在指定容器内显示Loading信息、显示和隐藏Tip信息...
通用jQuery对话框dialog或popup弹出层或提示窗口插件
ADF Table 选中某行,popup弹出编辑和添加例子
显示浮动自定义弹出窗口小部件的一种简单方法。 截屏 例子 截屏 例子 您可以通过以下命令运行示例。 cd ./example flutter create . flutter run 入门 dependencies : easy_popup : ^1.0.0 或者 dependencies...
Ultra Popup Blocker(简称UPB)是一种轻量级的Popup Blocker,旨在默认情况下从根本上阻止所有弹出窗口(即使是良好,无害,用户启动的窗口),同时让用户可以通过来临时或永久允许弹出窗口。 为什么要使用另一个弹...
在Popup和Child窗口之间转化(43KB)
显示相对于“拥有”元素具有固定位置(弹出窗口)的 DOM 元素。 这是一个巧妙的解决方法,用于在 CSS 中堆叠上下文限制(z-index、overflow:hidden 等) 这是一个 CommonJS 模块,你需要使用 。 用法 每个Popup...
-简化营销0.9.x中的重大更改现在,弹出窗口和叠加层是两个单独的层,以允许更多自定义。 有关样式示例,请参见 。全局API方法react-popup背后的想法是将其用作本机window.alert替代品。 具有一次仅显示一个弹出窗口...