我想要在用户聚焦在一个标签上时,显示一个弹出窗口,并且当用户离开聚焦的时候关闭这
个弹出窗口。
使用focusIn 和focusOut 事件(在InteractiveObject 类的子类的所有实例都可用)来调用
PopUpManager 相关的方法。
在用户聚焦时启动一个窗口,你可以重用前两节的代码。不过就是把弹出窗口的启动从用户
点击LInkButton 切换到通过focusIn 事件来创建而已。组件接受到聚焦的时候就会发布
focusIn 事件,例如当用户按tab 切换到组件上或者点击了它。focusIn 事件的处理代码只需
要在之前章节的内容添加一点:
移除这句代码,如果用鼠标交互,不影响程序运行效果。如果用 tab 键切换焦点,就会出现错误。
systemManager.removeFocusManager(IFocusManagerContainer(popup))
对应的上下文:
Code View:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas horizontalCenter="0" verticalCenter="0">
<mx:LinkButton id="lbl" label="Top" x="100" y="10"
focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="1"/>
<mx:LinkButton label="Left" x="10" y="100"
focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="3"/>
<mx:LinkButton label="Bottom" x="100" y="200"
focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="2"/>
<mx:LinkButton label="Right" x="200" y="100"
focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="4"/>
<mx:Canvas width="100" height="100" x="125" y="40"
backgroundColor="#ff0000" rotation="45">
</mx:Canvas>
<!-- tabIndex="0" TAB键无法使FOCUS到达该控件-->
<mx:TextInput x="50" y="280" tabIndex="0"/>
</mx:Canvas>
<mx:Script>
<![CDATA[
import mx.managers.IFocusManagerContainer;
import mx.managers.PopUpManager;
private const POPUP_OFFSET:int = 10;
private var popup:CustomPopUp;
private function showDetail(evt:FocusEvent):void {
//创建popup
popup =
CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));
popup.message = "This is the detail for " +
evt.target.label;
// popup定位
var pt:Point = new Point(0, 0);
pt = evt.target.localToGlobal(pt);
popup.x = pt.x + POPUP_OFFSET;
popup.y = pt.y + evt.target.height + POPUP_OFFSET;
systemManager.removeFocusManager(IFocusManagerContainer(popup))
}
private function closePopUp():void {
PopUpManager.removePopUp(popup);
}
]]>
</mx:Script>
</mx:Application>
当任意的弹出窗口被创建,默认情况,SystemManager 会被弹出窗口联结的FocusManager
激活。它允许基于刚创建的弹出窗口实现的聚焦循环(控制tab 顺序)。在这节,我们期
望一个不同的行为。当用户聚焦离开的时候(例如用户tab 出组件),弹出窗口因该关闭。
这就是从SystemManager 上移除了弹出窗口的FocusManager 所获得的。因此重新启动应用
程序的FocusManager。FocusOout 事件的处理函数closePopUp 包含了关闭弹出窗口的逻辑。
当这个应用程序运行中,重复按下tab 键的时候,聚焦会循环的在LinkButton 上产生,并
且相关的弹出窗口会被创建或者移除。
分享到:
相关推荐
弹出窗口的代码细节可能因具体需求而异,例如添加更多组件、调整样式、处理键盘和鼠标事件等。但以上提供的基础示例已经足够理解Flex中创建弹出窗口的基本步骤。在实际开发中,你可以根据项目需求对这段代码进行扩展...
本篇文章将详细探讨如何实现“自动弹出窗口”,特别是右下角和右上角弹出的窗口效果,以及与之相关的Flex技术。 首先,Flex是一种开源的开发框架,主要用于构建富互联网应用程序(RIA)。它基于ActionScript语言,...
总的来说,jQuery popup javascript弹出窗口的实现涉及到JavaScript编程、CSS样式设计、事件处理、浏览器兼容性优化等多个方面,是一个综合性的网页开发任务。通过研究提供的文件,可以深入理解这些技术的结合应用。
综上所述,通过Flex布局,我们可以轻松实现弹出窗口的居中显示,同时结合其他CSS和JavaScript技巧,可以打造出功能完备、用户体验良好的弹出窗口。在实际项目中,还可以根据需求进行更复杂的定制和优化。
综上所述,实现"Popup例子 实现弹出窗口的关闭"需要对WPF和Windows Phone的UI框架有深入理解,包括Popup的使用、事件监听、逻辑控制以及动画效果的添加。通过这些技术,我们可以创建出更符合用户习惯的交互界面,...
1. DOM 操作:jQuery 提供了 `$()` 函数来选择和操作页面上的元素,如找到特定的弹出窗口元素、获取或设置其属性。例如,`$("#popup")` 会选取ID为"popup"的弹出窗口元素。 2. 事件处理:jQuery 的 `click()` 方法...
4. **显示弹出窗口**:在JavaScript事件处理函数中,显示刚才创建的弹出窗口。可以改变弹出窗口的CSS属性,例如`display`,使其可见: ```javascript document.getElementById('popup').style.display = 'block'; ...
在网页设计和开发中,`popup`弹出框是一种常见的用户交互元素,它可以在用户进行特定操作或需要显示额外信息时出现。`popup`通常用于登录注册、消息提示、广告展示、确认操作等场景。本篇文章将深入探讨`popup`弹出...
Popup MSN风格的消息弹出窗口是一种常见的...总的来说,Popup MSN风格的消息弹出窗口的实现涉及客户端和服务器端的协同工作,利用了前端技术的动态性和后端语言的强大处理能力,为用户提供了一种直观且友好的交互体验。
通过`fadeIn`和`fadeOut`动画,我们可以实现平滑的弹出和关闭效果。 ### 4. 使用自定义弹出窗口 现在可以像使用`window.open`一样调用`showPopup`函数,同时返回一个关闭函数,以便在需要时关闭弹出窗口: ```...
总的来说,自定义ArcGIS for Silverlight的弹出窗口涉及UI设计、数据绑定、事件处理等多个方面,需要对Silverlight和ArcGIS API有深入的理解。通过以上步骤,开发者可以创建出符合业务需求的个性化弹出窗口,提升GIS...
21. above (boolean, 可选):使弹出窗口位于鼠标上侧(仅在设置了 height 属性时有效)。 22. below (boolean, 可选):使弹出窗口位于鼠标下侧。 23. border (integer, 可选):决定弹出窗口的边框厚度。 24. offsetx...
在Flex应用开发中,经常需要在主应用程序和弹出窗口(如对话框)之间交换数据,以便实现更加复杂的交互逻辑。 一、Flex中的组件层次结构 在Flex中,应用通常包含一个主程序(通常是Application类的实例),以及...
7. **增强用户体验**:除了基本功能,还可以增加其他特性,如防止页面滚动、阻止弹出窗口背后的点击事件,以及提供回调函数以便在弹出窗口打开和关闭时执行特定操作。 通过以上步骤,我们可以创建一个功能齐全、...
在Windows Phone平台上开发应用时,有时我们需要自定义弹出窗口以提供更丰富的用户交互体验...通过深入学习和实践这些知识点,开发者可以创建出功能强大且用户体验优秀的自定义弹出窗口,为Windows Phone应用增添亮点。
本篇将详细讲解如何使用ArcGIS API 实现多个弹窗(Popup)的弹出功能,这对于展示地图上的详细信息、提供用户交互体验至关重要。 首先,ArcGIS API 提供了Popup类,用于在地图上创建弹窗。Popup对象可以包含图层的...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。在本文中,我们将深入探讨如何使用jQuery...通过不断学习和实践,你可以创建出更加复杂和富有创意的弹出窗口效果。
在这里,我们将深入探讨JavaScript弹出窗口的原理、实现方式以及可能涉及到的`popup.js`和`PopupsUtil.js`这两个文件的角色。 首先,JavaScript弹出窗口通常通过以下几种方式创建: 1. `window.alert()`: 这个函数...
本示例主要探讨如何实现"ADF Table popup 弹出编辑和添加"功能,这是在开发企业级Web应用程序时非常常见的需求。下面将详细阐述这个功能的实现步骤、涉及的技术点以及其在实际应用中的价值。 首先,`ADF Table` 是...
本文将深入探讨如何使用jQuery实现一个弹出窗口,并基于提供的标题和描述来构建相关知识点。 首先,我们要了解jQuery弹出窗口的基本概念。这种弹出窗口通常被称为模态对话框或模态窗口,它会在用户与网页其他部分...