`
lipbb
  • 浏览: 68529 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex4 弹出窗口滑入滑出

阅读更多
先看示例:


代码SimpleMessageBox:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
				   xmlns:s="library://ns.adobe.com/flex/spark"
				   xmlns:mx="library://ns.adobe.com/flex/mx"
				   width="200" backgroundColor="0xFF0000"
				   visible="false"
				   showEffect="{seq}"
				   initialize="bordercontainer1_initializeHandler(event)"
				   creationComplete="bordercontainer1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			protected function bordercontainer1_creationCompleteHandler(event:FlexEvent):void
			{
				var w:Number = msgLabel.measuredWidth + 5;
				moveIn.xBy = -w;
				moveOut.xBy = w;
				
				this.height = msgLabel.measuredHeight + 5;
				
				this.visible = true;
			}
			
			[Bindable]
			protected static var instance:SimpleMessageBox;
			
			private static var _message:String;
			
			public static function show(message:String, parent:DisplayObject):void
			{
				if(instance != null)
					return;
				
				instance = new SimpleMessageBox();
				_message = message;
				
				instance.x = parent.x + parent.width;
				instance.y = 10;
				
				PopUpManager.addPopUp(instance, parent);
			}
			
			protected function seq_effectEndHandler(event:EffectEvent):void
			{
				PopUpManager.removePopUp(instance);
				instance = null;
			}
			
			protected function bordercontainer1_initializeHandler(event:FlexEvent):void
			{
				msgLabel.text = _message;
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<s:Sequence id="seq" effectEnd="seq_effectEndHandler(event)" target="{instance}">
			<s:Move id="moveIn" duration="1000"/>
			<!--用startDelay指定滑出前的暂停时间-->
			<s:Move id="moveOut" duration="1000" startDelay="3000"/>
		</s:Sequence>
	</fx:Declarations>
	
	<s:Label id="msgLabel" width="100%" maxDisplayedLines="2" verticalAlign="middle"/>
</s:BorderContainer>


application关键代码:
	
	<fx:Script>
		<![CDATA[
			import controls.SimpleMessageBox;
			
			import mx.events.EffectEvent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			
			import spark.components.BorderContainer;
			import spark.components.Label;
			
			protected function showMessageBox():void
			{
				SimpleMessageBox.show(msgInput.text, this);
			}
			
			protected function msgInput_creationCompleteHandler(event:FlexEvent):void
			{
				msgInput.setFocus();
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<s:TextInput id="msgInput" x="10" y="10"
				 creationComplete="msgInput_creationCompleteHandler(event)" enter="showMessageBox()"
				 text="注意啦,回车也能弹出来啦"/>
	<s:Button x="10" y="50" label="show" click="showMessageBox()"/>
	<s:Button x="10" y="80" label="clear input" click="msgInput.text='';"/>
分享到:
评论

相关推荐

    flex 自动弹出窗口(右下角弹出,右上角弹出)

    本篇文章将详细探讨如何实现“自动弹出窗口”,特别是右下角和右上角弹出的窗口效果,以及与之相关的Flex技术。 首先,Flex是一种开源的开发框架,主要用于构建富互联网应用程序(RIA)。它基于ActionScript语言,...

    Flex 弹出窗口代码

    在Flex编程中,"弹出窗口代码"是一个常见的需求,特别是在设计用户交互界面时,我们经常需要实现点击按钮后打开一个新的窗口或者对话框来展示更多信息或进行特定操作。本篇将详细讲解如何在Flex中创建一个点击按钮后...

    flex 苹果桌面效果的弹出窗口

    标题中的“flex 苹果桌面效果的弹出窗口”指的是使用Adobe Flex技术在苹果桌面环境中实现类似苹果OS X系统的弹出窗口效果。Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA),它允许...

    Flex 弹出窗口的数据传输

    标题中的“Flex 弹出窗口的数据传输”指的是在Adobe Flex应用程序中如何实现在弹出窗口(通常是PopUpWindow或ModalDialog)与主应用程序之间进行数据交互。Flex是一种用于构建富互联网应用程序(RIA)的开放源代码...

    flex4自定义弹出窗口 事件

    flex4自定义弹出窗口 支持最大化 最小化

    flex 鼠标移上去滑出 移走滑入

    flex 鼠标移上去滑出 移走滑入、flex 鼠标移上去滑出 移走滑入、

    flex 弹出窗口并居中显示

    本文将详细讲解如何利用Flex布局实现弹出窗口并使其居中显示,这对于创建各种交互式功能,如模态框、提示框等至关重要。 一、Flex布局基础 1. Flex容器:一个具有`display: flex`或`display: inline-flex`样式的...

    Flex4 Air 自定义窗口

    Flex4 AIR自定义窗口是一种高级的用户界面设计技术,它允许开发者创建出具有独特特性和交互体验的应用程序。在本文中,我们将深入探讨Flex4和Adobe Integrated Runtime (AIR)如何结合,实现自定义窗口功能,包括窗口...

    flex 弹出窗口选择,支持autocomplete功能

    在本文中,我们将深入探讨如何在Flex环境中实现一个具有autocomplete(自动补全)功能的弹出窗口选择器。Flex是一种基于ActionScript的开源框架,用于构建富互联网应用程序(RIA),它允许开发者创建交互性强、用户...

    Flex使用弹出窗口为DataGrid添加新数据

    而TitleWindow则是一种常用的小型窗口,常用来显示弹出式对话框。本篇将深入探讨如何利用Flex 3中的TitleWindow组件来为DataGrid添加新数据,以提升用户体验。 首先,了解Flex 3中的TitleWindow组件。TitleWindow是...

    弹出窗口效果

    4. 轮廓和阴影:`border` 和 `box-shadow` 属性可以添加边框和阴影,提升弹出窗口的视觉吸引力。 5. 内容布局:使用 `flexbox` 或 `grid` 布局可以方便地对弹出窗口内部元素进行排列。 6. 动画过渡:CSS3 的 `...

    Flex中弹出对话框的定制

    ### Flex中弹出对话框的定制 在Flex开发过程中,弹出对话框是与用户交互的一个常见需求。本文将深入探讨如何在Flex中定制弹出对话框,包括基础的警告框、确认框以及带有取消选项的确认框。通过具体代码示例来详细...

    Flex4 的 苹果风格 弹出窗口

    基于国外的 MacPopup 苹果风格,自己很喜欢,但是国外提供的 该控件 是基于flex 3的 ,所以在目前flex4为主流的 sdk 情况下,会出现错误。本控件 已经做了修正。可以直接运行。请指导。

    flex4 线上带点,并弹出窗体效果代码

    flex4 线上带点,并弹出窗体效果代码,分享给大家做个参考,不能运行,这个是需要我的后台代码(java)结合才能看到效果,大家下载下来自己修改就可以了。 这个是效果图 ...

    flex仿qq右边弹出提示消息功能

    首先,我们要理解Flex中的弹出窗口(Pop-up Window)机制。在Flex中,我们可以使用PopUpManager类来创建和管理弹出窗口。这个类提供了打开和关闭窗口,以及调整窗口大小和位置的方法。通过实例化PopUpManager并传递...

    用flex实现苹果样式的弹出菜单

    在本文中,我们将深入探讨如何使用Flex技术来创建一个类似于苹果风格的弹出菜单。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的用户界面组件和强大的数据绑定...

    Flex--主程序与弹出窗口之间传递数据

    这个主题聚焦于“Flex中主程序与弹出窗口之间的数据传递”。在Flex应用开发中,经常需要在主应用程序和弹出窗口(如对话框)之间交换数据,以便实现更加复杂的交互逻辑。 一、Flex中的组件层次结构 在Flex中,应用...

Global site tag (gtag.js) - Google Analytics