`
lipbb
  • 浏览: 69166 次
  • 性别: 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语言,...

    几种样式的DIV弹出层

    弹出层的样式可以多样化,例如模态对话框(modal dialog)风格,带有阴影效果,或者带有动画过渡的滑入滑出效果。此外,CSS还可以用于设置关闭按钮的样式,以及确保弹出层内容居中对齐。 JavaScript则是实现弹出层...

    AIR桌面应用(自定义任务栏图标、类QQ消息提示窗体)

    为了实现消息弹出效果,可以利用TweenMax、TweenLite等库进行动画处理,使得窗体能够从屏幕边缘平滑地滑入和滑出。 实现类QQ消息提示窗体的关键在于事件监听和窗口管理。你需要监听系统事件,如新消息到达,然后在...

    css-doc-menu

    - **动画效果**:虽然CSS可以实现一些简单的动画,但更复杂的动画,如菜单项的滑入滑出效果,通常需要JavaScript配合实现。 - **响应式行为**:JavaScript可以检测窗口大小变化,以适应不同的屏幕尺寸,确保Dock ...

    基于jquery+css3实现的通栏响应式图片轮播动画特效源码.zip

    `使得图片的透明度变化有缓入缓出的效果。 - **动画(Animation)**:利用`@keyframes`规则创建自定义动画,可以控制图片的精确移动,比如淡入淡出、滑动等特效。 - **媒体查询(Media Queries)**:`@media ...

Global site tag (gtag.js) - Google Analytics