Flex中如何利用PopUpManager类创建一个弹出Image控件的例子

接下来的例子演示了Flex中如何利用PopUpManager类，创建一个弹出Image控件。

 

 

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

 

 

 

下面是完整代码(或点击这里察看)：

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:Style>
8.         global {
9.             modalTransparencyBlur: 0;
10.             modalTransparency: 0.9;
11.             modalTransparencyColor: black;
12.             modalTransparencyDuration: 500;
13.         }
14.     </mx:Style>
15.  
16.     <mx:Script>
17.         <![CDATA[
18.             import mx.controls.Image;
19.             import mx.managers.PopUpManager;
20.  
21.             private const IMG_PREFIX:String = "http://www.helpexamples.com/flash/images/";
22.  
23.             private function popIt(src:String):void {
24.                 var img:Image = new Image();
25.                 img.addEventListener(MouseEvent.CLICK, img_click);
26.                 img.addEventListener(Event.COMPLETE, img_complete);
27.                 img.load(IMG_PREFIX + src);
28.                 img.toolTip = img.source.toString();
29.                 PopUpManager.addPopUp(img, this, true);
30.             }
31.  
32.             private function img_complete(evt:Event):void {
33.                 var img:Image = evt.currentTarget as Image;
34.                 img.width = img.contentWidth;
35.                 img.height = img.contentHeight;
36.                 PopUpManager.centerPopUp(img);
37.             }
38.  
39.             private function img_click(evt:MouseEvent):void {
40.                 var img:Image = evt.currentTarget as Image;
41.                 PopUpManager.removePopUp(img);
42.             }
43.         ]]>
44.     </mx:Script>
45.  
46.     <mx:ApplicationControlBar dock="true">
47.         <mx:Button label="image 1" click="popIt('image1.jpg');" />
48.         <mx:Button label="image 2" click="popIt('image2.jpg');" />
49.         <mx:Button label="image 3" click="popIt('image3.jpg');" />
50.     </mx:ApplicationControlBar>
51.  
52. </mx:Application>