先看示例:
代码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是一种开源的开发框架,主要用于构建富互联网应用程序(RIA)。它基于ActionScript语言,...
弹出层的样式可以多样化,例如模态对话框(modal dialog)风格,带有阴影效果,或者带有动画过渡的滑入滑出效果。此外,CSS还可以用于设置关闭按钮的样式,以及确保弹出层内容居中对齐。 JavaScript则是实现弹出层...
为了实现消息弹出效果,可以利用TweenMax、TweenLite等库进行动画处理,使得窗体能够从屏幕边缘平滑地滑入和滑出。 实现类QQ消息提示窗体的关键在于事件监听和窗口管理。你需要监听系统事件,如新消息到达,然后在...
- **动画效果**:虽然CSS可以实现一些简单的动画,但更复杂的动画,如菜单项的滑入滑出效果,通常需要JavaScript配合实现。 - **响应式行为**:JavaScript可以检测窗口大小变化,以适应不同的屏幕尺寸,确保Dock ...
`使得图片的透明度变化有缓入缓出的效果。 - **动画(Animation)**:利用`@keyframes`规则创建自定义动画,可以控制图片的精确移动,比如淡入淡出、滑动等特效。 - **媒体查询(Media Queries)**:`@media ...