需求:
在一般用户操作中,需要进行一些提示例如:修改成功,修改完成,删除成功等,一般我们使用Flex自带的Alert.show的方式,但是在应用一些提示反馈的时候,我们可能希望只是提示一下就自动消失掉窗口,而不需要客户多点一次确定去取消窗口,写了一个提示方法,代码如下:
package com.ruixinflex.mapoperation.classes.MsgBox
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import mx.containers.Panel;
import mx.controls.Image;
import mx.core.FlexGlobals;
import mx.events.FlexMouseEvent;
import mx.managers.PopUpManager;
import com.ruixinflex.mapoperation.classes.*;
import spark.components.Label;
public class MsgBox extends Panel
{
private var _label:Label;
private var _context:String;
private var _image:Image;
private var _imageType:int;
private var _fadeEffect:FadeEffect;
public static var imageType_warning:int = 1;
public static var imageType_error:int = 2;
public static var imageType_right:int = 3;
[Bindable]
[Embed(source="assets/icoRight.png")]
public var icoRight:Class
[Bindable]
[Embed(source="assets/icoError.png")]
public var icoError:Class
[Bindable]
[Embed(source="assets/icoWarning.png")]
public var icoWarning:Class
public function MsgBox(context:String,imageType:int)
{
super();
this.setStyle("headerHeight",0);
this._context = context;
this._imageType = imageType;
this._fadeEffect = new FadeEffect(this);
}
override protected function createChildren() : void {
super.createChildren();
addChild(createLabel());
addChild(createImage());
}
public static function show(context:String,imageType:int = 1):void {
var msgBox:MsgBox = new MsgBox(context,imageType);
PopUpManager.addPopUp(msgBox,(DisplayObject)(FlexGlobals.topLevelApplication));
PopUpManager.centerPopUp(msgBox);
msgBox._fadeEffect.fadeOut(3500);
msgBox.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,msgBox.removePopUp);
msgBox.addEventListener(MouseEvent.MOUSE_OVER,msgBox.mouseOver);
msgBox.addEventListener(MouseEvent.MOUSE_OUT,msgBox.mouseOut);
}
private function removePopUp(e:FlexMouseEvent):void {
PopUpManager.removePopUp(this);
}
private function mouseOver(e:MouseEvent):void {
if (this._fadeEffect.isPlaying) {
this._fadeEffect.fadeIn(0);
}
}
private function mouseOut(e:MouseEvent):void {
_fadeEffect.fadeOut(3500);
}
override protected function measure():void {
this._label.width = this._label.measureText(_context).width;
this._label.height = this._label.measureText(_context).height;
measuredWidth = this._label.width + 32 + 48;
measuredHeight = 32 * 2;
}
override protected function updateDisplayList(param1:Number, param2:Number) : void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
this._label.move(48 + (this.width - this._label.width - 48)/2 - 5 ,(this.height - this._label.height)/2);
this._image.x = 16;
this._image.y = 16;
}
private function createImage():Image {
_image = new Image();
if (_imageType == MsgBox.imageType_error) {
_image.source = icoError;
_label.setStyle("color","red");
} else if (_imageType == MsgBox.imageType_right) {
_image.source = icoRight;
} else {
_image.source = icoWarning;
_label.setStyle("color","red");
}
return _image;
}
private function createLabel():Label {
_label = new Label();
_label.setStyle("fontSize",13);
_label.text = _context;
return _label;
}
}
}
MsgBox.show("修改成功",3);
1、提示窗口自动3.5秒窗口消失(淡出)
2、淡出过程中,如鼠标触碰显示(如客户关注提示信息鼠标滑过,自动取消淡出,显示)
3、鼠标离开提示窗口3.5秒窗口消失(淡出)
目前有些参数并没有提取,只是要满足我项目中的使用,有兴趣的朋友可以提取一下。
注意:
1、上述代码需要引用三个图标
2、上述代码使用了我前一篇的淡入淡出窗口类FadeEffect,需要的话,打开我前篇博客。
无图无真相
- 大小: 8.1 KB
分享到:
相关推荐
flex datagrid 添加按钮并根据特定内容进行判断是否显示按钮
Flex 作出的按钮 可以作为参考,word里有显示的样子
Flex文本框自动提示源码,flex,flex
flex 按钮 风格 打包 下载,您一定想定制各种不同风格的 flex 按钮 吧 看下吧 包你有用哦
Flex构建REST
6款自己写的flex btn皮肤,其中包含4种无边框样式,2种带边框按钮。
版本Flex4.6 Air3.1,项目下载下来就可以用。项目打包安装后,可以同时开多窗,也可以自动更新。本来有效果图的,但是传不上来
flex3 转 flex4 原来的皮肤不能使用,该文档是flex4的图片按钮类,非常好用哦,自己写的
一个完成的Flex4 Air 自定义窗口,可以缩小到托盘中,后台运行
flex3 自动提示
Flex文本框自动提示源码 用到Flex文本框自动提示的功能 设计思路 思路比较简单,组件分成两个部分,1文本框;2提示的下拉列表; 自动提示: 在文本框中输入文字时,在数据源(所有的提示项)查找匹配的选项,若...
flex4舞台尺寸随浏览器窗口大小改变.rar
flex suggestion组件(支持拼音)自动提示,自动补全,类似于百度搜索 可以支持输入拼音匹配汉字,支持汉字 包含匹配
五分钟用Flex构建WebService应用,我以前看过的Flex连接.net的WebService比较好的保存下来的网页 2分下完别说我骗你~
Flex 点击按钮 弹出窗口并居中显示代码 复制就行了
资源名称:Flex构建Android和iOS应用程序视频教程资源目录:【】00Introduction【】01GettingStartedwithFlexandAndroid【】03UnderstandingtheArchitectureofaFlexMobileApp【】04UtilizingMobileComponents【】05...
通过鼠标拖动可以改变窗口的位置,鼠标在窗口边框上是并按下并拖动就可以改变窗口的大小。。。
NULL 博文链接:https://kingnights.iteye.com/blog/1026853
Flex做的按钮3D效果源码
FLEX 自动生成器