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

最新推荐文章于 2025-09-16 12:24:35 发布

原创最新推荐文章于 2025-09-16 12:24:35 发布 · 120 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Flex

本文介绍了一个使用Adobe Flash技术实现的图片弹窗应用案例。该应用通过加载不同图片资源并在弹窗中显示，同时具备居中显示及点击关闭的功能。代码中运用了事件监听和管理器来处理图片加载完成及用户交互事件。


<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white"> 

    <mx:Style> 
        global { 
            modalTransparencyBlur: 0; 
            modalTransparency: 0.9; 
            modalTransparencyColor: black; 
            modalTransparencyDuration: 500; 
        } 
    </mx:Style> 

    <mx:Script> 
        <![CDATA[ 
            import mx.controls.Image; 
            import mx.managers.PopUpManager; 

            private const IMG_PREFIX:String = "http://www.helpexamples.com/flash/images/"; 

            private function popIt(src:String):void { 
                var img:Image = new Image(); 
                img.addEventListener(MouseEvent.CLICK, img_click); 
                img.addEventListener(Event.COMPLETE, img_complete); 
                img.load(IMG_PREFIX + src); 
                img.toolTip = img.source.toString(); 
                PopUpManager.addPopUp(img, this, true); 
            } 

            private function img_complete(evt:Event):void { 
                var img:Image = evt.currentTarget as Image; 
                img.width = img.contentWidth; 
                img.height = img.contentHeight; 
                PopUpManager.centerPopUp(img); 
            } 

            private function img_click(evt:MouseEvent):void { 
                var img:Image = evt.currentTarget as Image; 
                PopUpManager.removePopUp(img); 
            } 
        ]]> 
    </mx:Script> 

    <mx:ApplicationControlBar dock="true"> 
        <mx:Button label="image 1" click="popIt('image1.jpg');" /> 
        <mx:Button label="image 2" click="popIt('image2.jpg');" /> 
        <mx:Button label="image 3" click="popIt('image3.jpg');" /> 
    </mx:ApplicationControlBar> 

</mx:Application>