通过Alert显示提示信息实在太恶劣了,便想模仿QQ的提示,本想拿来主义,网上找个现成的,看了两个都不太理想,还是自己动手吧。
首先是弹出的TitleWindow组件,用于显示信息,大家自己丰富吧:
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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" height="80"
close="closeHandler(event)"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.events.FlexEvent;
public var timeOut:int = 3000;
[Bindable]
public var msg:String;
private function init():void
{
setTimeout(close,timeOut);
}
protected function closeHandler(event:CloseEvent):void
{
this.close();
}
private function close():void
{
BottomTip.removePopUp(this);
}
public function location(sw:int,sh:int):void
{
this.x = sw - this.width;
this.y = sh - this.height;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Label text="{msg}"/>
</s:TitleWindow>
接下来是外部使用的接口类
package
{
import flash.display.DisplayObject;
import flash.display.Stage;
import mx.core.FlexGlobals;
import mx.core.mx_internal;
import mx.effects.Move;
import mx.events.TweenEvent;
import mx.managers.PopUpManager;
public class BottomTip
{
private var sWidth:int;
private var sHeight:int;
private var parent:DisplayObject;
public var title:String;
public var msg:String;
public var type:String;
public function BottomTip(parent:DisplayObject)
{
this.parent = parent;
var stage:Stage = FlexGlobals.topLevelApplication.stage;
sWidth = stage.stageWidth;
sHeight = stage.stageHeight;
}
public function showMsg(msg:String,title:String="操作提示",type:String=""):void{
var window:BottomWindow = new BottomWindow();
window.title = title;
window.msg = msg;
window.location(sWidth,sHeight);
var move:Move = new Move(window);
move.duration=500;
move.yFrom = sHeight;
move.yTo = window.y;
PopUpManager.addPopUp(window,parent);
move.play();
}
internal static function removePopUp(window:BottomWindow):void
{
var move:Move = new Move(window);
move.duration = 500;
move.yFrom = window.y;
move.yTo = FlexGlobals.topLevelApplication.stage.stageHeight;
move.addEventListener(TweenEvent.TWEEN_END,function():void{
PopUpManager.removePopUp(window);
});
move.play();
}
}
}
使用示例
new BottomTip(this).showMsg("让我们来测试测试吧,哈哈哈");
分享到:
相关推荐
本篇文章将详细探讨如何实现“自动弹出窗口”,特别是右下角和右上角弹出的窗口效果,以及与之相关的Flex技术。 首先,Flex是一种开源的开发框架,主要用于构建富互联网应用程序(RIA)。它基于ActionScript语言,...
本项目“flex仿qq右边弹出提示消息功能”旨在模仿QQ聊天软件中的右下角弹出通知功能,为用户提供类似的新消息提醒体验。这种功能在现代Web应用中非常常见,用于展示系统更新、用户通知或重要消息。 首先,我们要...
网页右下角提示窗口 <!-- 主要内容 --> ... <!-- 右下角提示窗口 --> 提示信息 最小化 关闭 <script src="16sucai.js"></script> ``` 接下来,`16sucai_style.css` 文件用于定义样式。我们...
在JavaScript编程中,实现点击按钮后在屏幕右下角弹出消息通知提示框是一项常见的功能,主要用于向用户显示系统状态或操作反馈。本教程将详细讲解如何创建这种通知提示框,包括默认、成功、警告和危险四种不同类型的...
标题“flex 嵌入文字样式”和描述“flex 嵌入外部文字样式,弥补flex内部字体不足的缺憾”提示我们关注如何在Flex容器中使用自定义或外部字体来增强文本表现力。 首先,让我们了解Flex布局的基本概念。Flex布局允许...
在JavaScript(js)前端开发中,创建一个右下角悬浮提示框并实现可最大化、最小化和关闭功能是一项常见的需求。这种提示框通常用于显示重要通知、消息或者提供额外的操作选项,为用户提供更加友好的交互体验。下面...
3. 点击“Flex SDKs”,点击右下角的“New”按钮。 4. 输入SDK名称(如“Flex SDK 4.x”),然后浏览并选择之前解压的Flex SDK目录。 5. 确认设置无误后,点击“OK”。 四、创建Flex项目 1. 在MyEclipse中,选择...
标题中的“仿行情软件的键盘精灵”指的是一个特殊设计的用户界面组件,它模拟了股票行情软件中的功能,即用户只需按下数字键就能快速访问或操作特定的股票数据,并且在按下数字键时会显示相应的提示信息。...
例如,要创建一个始终位于屏幕右下角的元素,可以这样设置: ```css .element { position: fixed; bottom: 0; right: 0; } ``` 这里,`bottom: 0;`将元素的底部与浏览器窗口的底部对齐,`right: 0;`将元素的...
在Android设备上,默认的页面跳转动画是从下往上滑动,但我们可以使用`transitionConfig`来自定义动画效果,使其与iOS的自右向左动画保持一致: ```javascript transitionConfig: () => ({ screenInterpolator: ...
- `bottomRight`: 目标元素右下角。 - **keepalive**: 可选参数,用于控制气泡是否保持活动状态。如果设置为`true`,则即使用户点击屏幕其他区域或页面切换时,气泡也不会消失,只有通过调用`hide`方法才能使其消失...
在提供的文件"仿QQ右下角弹出可关闭的消息框.txt"中,我们可以推测这是一个关于模拟QQ消息提示框的实现,这可能涉及到JavaScript的DOM操作和事件监听。虽然这个文件名与页面加载的Loading效果直接关联不大,但这种弹...
- **防止父级边框塌陷的方法**:使用`overflow:hidden`、`clearfix`技术、`display: flex`或`display: grid`等。 - **定位**:使用`position`属性实现元素的绝对定位、相对定位等。 - **利用CSS3制作网页动画**:...
同时,CSS还可以通过`flex-direction`或`grid-template-columns`控制这些元素的排列方向,以实现从上至下、从左至右的树形结构。 其次,CSS用于美化每个节点(即社交链接)。利用`border-radius`可以为图标添加圆角...
7. **保存与分享**:当你对项目满意时,可以点击右上角的“Save”按钮保存项目。然后,点击“Share”按钮,获取一个唯一的URL,通过这个URL,你可以与他人分享你的项目。 8. **协作与版本控制**:CodeSandbox还支持...