创建弹出窗口的图片展示
生活随笔
收集整理的這篇文章主要介紹了
创建弹出窗口的图片展示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
| 本帖最后由 oisweb 于 2009-11-24 14:11 編輯 圖片有點大了 顯示不是很好 自己看著辦吧 1 創建工程 設置頁面屬性 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ? ???horizontalAlign="center"??verticalAlign="middle" > 2 創建xml文件?讀取圖片 <?xml version="1.0"?> <gallery> ? ? <movie> ? ? ? ? ? ? <pic>1.jpg</pic> ? ? ? ? ? ? <title>騰焰飛芒</title> ? ? ? ? ? ? <date>騰焰飛芒</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>2.jpg</pic> ? ? ? ? ? ? <title>凌波微步</title> ? ? ? ? ? ? <date>凌波微步</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>3.jpg</pic> ? ? ? ? ? ? <title>飛俠失足</title> ? ? ? ? ? ? <date>飛俠失足</date> ? ? </movie> ? ?? ? ?? ???<movie> ? ? ? ? ? ? <pic>4.jpg</pic> ? ? ? ? ? ? <title>得失寸心知</title> ? ? ? ? ? ? <date>得失寸心知</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>5.jpg</pic> ? ? ? ? ? ? <title>直沖云霄</title> ? ? ? ? ? ? <date>直沖云霄</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>6.jpg</pic> ? ? ? ? ? ? <title>勢不可擋</title> ? ? ? ? ? ? <date>勢不可擋</date> ? ? </movie>? ? ? ?? ? ???<movie> ? ? ? ? ? ? <pic>7.jpg</pic> ? ? ? ? ? ? <title>鷹擊長空</title> ? ? ? ? ? ? <date>鷹擊長空</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>8.jpg</pic> ? ? ? ? ? ? <title>凝神聚氣</title> ? ? ? ? ? ? <date>凝神聚氣</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>9.jpg</pic> ? ? ? ? ? ? <title>風激電飛</title> ? ? ? ? ? ? <date>風激電飛</date> ? ? </movie>? ?? ? ?? ? ? <movie> ? ? ? ? ? ? <pic>10.jpg</pic> ? ? ? ? ? ? <title>百萬噸暴扣</title> ? ? ? ? ? ? <date>百萬噸暴扣</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>11.jpg</pic> ? ? ? ? ? ? <title>虎視眈眈</title> ? ? ? ? ? ? <date>虎視眈眈</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>12.jpg</pic> ? ? ? ? ? ? <title>一意專心</title> ? ? ? ? ? ? <date>一意專心</date> ? ? </movie> </gallery> 3 創建圖片文件夾 images 放要展示的圖片 4 加入<mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/> 5好 開始寫代碼把 先as吧 <mx:Script> ? ?? ???<![CDATA[ ? ?? ?? ?? ?import mx.collections.ArrayCollection; ? ?? ?? ?? ?import mx.rpc.events.ResultEvent; ? ?? ?? ?? ?[Bindable] ? ?? ?? ?? ?private var movies:ArrayCollection; ? ?? ?? ?? ?private?function?serviceHandler(event:ResultEvent):void{ ? ?? ?? ?? ?? ? movies = event.result.gallery.movie; ? ?? ?? ?? ?} ? ?? ???]]> </mx:Script> 6 讀取xml數據?我們需要呼叫httpservice 頭頂加入send()方法 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" ? ???horizontalAlign="center"??verticalAlign="middle" ? ???creationComplete="service.send()" > 7 縮略圖展示我們用TileList組件? <mx:TileList id="moviesList" dataProvider="{movies}" ? ?? ???direction="horizontal" ? ?? ???width="800" height="450" rowHeight="150" columnWidth="200"> ? ?? ???<mx:itemRenderer> ? ?? ?? ?? ?<mx:Component> ? ?? ?? ?? ?? ? <mx:VBox horizontalAlign="center" verticalAlign="middle"> ? ?? ?? ?? ?? ?? ???<mx:Image source="images/thumbs/{data.pic}"/> ? ?? ?? ?? ?? ?? ???<mxabel text="{data.date}" /> ? ?? ?? ?? ?? ? </mx:VBox> ? ?? ?? ?? ?</mx:Component> ? ?? ???</mx:itemRenderer> ? ? </mx:TileList> 8 有了縮略圖 我們要最終顯示大圖片 我們建一個自定義組件mx:TitleWindow <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" ? ? ? ? layout="vertical" width="400" height="520" ? ? ? ? horizontalAlign="center" ? ? ? ? showCloseButton="true" ? ? ? ? close="closeWindow(event);" > ? ? ? ? <mx:Script> ? ? ? ? ? ? ? ? <![CDATA[ ? ? ? ? ? ? ? ? ? ? ? ? import mx.events.CloseEvent; ? ? ? ? ? ? ? ? ? ? ? ? import mx.managers.PopUpManager; ? ? ? ? ? ? ? ? ? ? ? ? [Bindable] ? ? ? ? ? ? ? ? ? ? ? ? public var sourceImage:String; ? ? ? ? ? ? ? ? ? ? ? ? private function closeWindow(e:CloseEvent):void { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.removePopUp(this); ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ]]> ? ? ? ? </mx:Script> ? ? ? ? <mx:Image source="{sourceImage}"/> </mx:TitleWindow> 9 同時為使彈出窗口更加得心應手，我們希望能夠關閉它 ，只是上按一下。為此，我們要派出一個click事件偵聽CloseEvent。 <mx:TileList id="moviesList" dataProvider="{movies}" ? ?? ???direction="horizontal" ? ?? ???width="800" height="450" rowHeight="150" columnWidth="200" ? ?? ???click="launchPopUp(event)"> 10 返回主文件增加點擊事件 <mx:TileList id="moviesList" dataProvider="{movies}" ? ?? ???direction="horizontal" ? ?? ???width="800" height="450" rowHeight="150" columnWidth="200" ? ?? ???click="launchPopUp(event)"> 11 增加 private function launchPopUp(e:MouseEvent):void { ? ?? ???if(moviesList.selectedItem){ ? ?? ?? ?? ???var win : Window = new Window(); ? ?? ?? ?? ???win.sourceImage = "images/"+moviesList.selectedItem.pic; ? ?? ?? ?? ???win.title =??moviesList.selectedItem.title; ? ?? ?? ?? ???PopUpManager.addPopUp(win,this,true); ? ?? ?? ?? ???PopUpManager.centerPopUp(win); ? ?? ???} } 12 ok ！具體看最終代碼吧 圖片文件夾內容自己加吧 給出三個文件 Main.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"? ? ???horizontalAlign="center"??verticalAlign="middle" ? ???creationComplete="service.send()" viewSourceURL="srcview/index.html"> ? ?? ? ? <mx:Style>? ? ? ? ? ? ? ? global{ ? ? ? ???? ? ? ? ? ? ? ? modalTransparency : .8; ? ? ? ? ? ? ? ? ? ? ? ? modalTransparencyColor : #000000; ? ? ? ???? ? ? ? }? ?? ? ? ? ???? ? ? ? Application{ ? ? ? ???? ? ? ???? ? ? ? backgroundGradientColors: #ffffff, #ffffff; ? ?? ? ? ? ? ? ? ? ? ? ? ? backgroundGradientAlphas: 1, 1; ? ? ? ???? ? ? ? }? ? ?? ???TileList{ ? ?? ?? ?? ?selectionColor:??#717070; ? ?? ?? ?? ?rollOverColor: #CCCCCC; ? ?? ?? ?? ?borderStyle : none; ? ?? ???} ? ?? ???TitleWindow{ ? ? ? ???? ? ? ? ? ? ? ? borderColor : #C1C1C1; ? ? ? ???? ? ? ? ? ? ? ? borderAlpha : .8; ? ? ? ???? ? ? ? ? ? ? ? fontSize : 14; ? ? ? ???? ? ? ? ? ? ? ? fontFamily :Georgia; ? ? ? ???? ? ? ? ? ? ? ? fontWeight : bold ; ? ? ? ???? ? ? ? ? ? ? ? color : #FFFFFF; ? ? ? ???? ? ? ? } ? ? ? ???? ? ? ? Label{ ? ? ? ???? ? ? ? ? ? ? ? color : #000000; ? ? ? ???? ? ? ? ? ? ? ? fontStyle : italic;? ? ? ? ???? ? ? ? } ? ? </mx:Style> ? ?? ? ? <mx:Script> ? ?? ???<![CDATA[ ? ?? ?? ?? ?import mx.collections.ArrayCollection; ? ?? ?? ?? ?import mx.rpc.events.ResultEvent; ? ?? ?? ?? ?import mx.managers.PopUpManager; ? ?? ?? ?? ? ? ?? ?? ?? ?[Bindable] ? ?? ?? ?? ?private var movies:ArrayCollection; ? ?? ?? ?? ? ? ?? ?? ?? ?private function serviceHandler(event:ResultEvent):void{ ? ?? ?? ?? ?? ? movies = event.result.gallery.movie; ? ?? ?? ?? ?} ? ?? ?? ?? ? ? ?? ?? ?? ?private function launchPopUp(e:MouseEvent):void { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(moviesList.selectedItem){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var win : Window = new Window(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? win.sourceImage = "images/"+moviesList.selectedItem.pic; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? win.title =??moviesList.selectedItem.title; ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.addPopUp(win,this,true); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.centerPopUp(win); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? } ? ?? ?? ?? ? ? ?? ???]]> ? ? </mx:Script> ? ? <mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/> ? ? <mx:TileList id="moviesList" dataProvider="{movies}"? ? ?? ???direction="horizontal" ? ?? ???width="100%" height="100%" rowHeight="250" columnWidth="200" ? ?? ???click="launchPopUp(event)"> ? ?? ???<mx:itemRenderer> ? ?? ?? ?? ?<mx:Component> ? ?? ?? ?? ?? ? <mx:VBox horizontalAlign="center" verticalAlign="middle"> ? ?? ?? ?? ?? ?? ???<mx:Image source="images/thumbs/{data.pic}"/> ? ?? ?? ?? ?? ?? ???<mxabel text="{data.date}" /> ? ?? ?? ?? ?? ? </mx:VBox> ? ?? ?? ?? ?</mx:Component> ? ?? ???</mx:itemRenderer> ? ? </mx:TileList> ? ? </mx:Application> images.xml <?xml version="1.0"?> <gallery> ? ? <movie> ? ? ? ? ? ? <pic>1.jpg</pic> ? ? ? ? ? ? <title>騰焰飛芒</title> ? ? ? ? ? ? <date>騰焰飛芒</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>2.jpg</pic> ? ? ? ? ? ? <title>凌波微步</title> ? ? ? ? ? ? <date>凌波微步</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>3.jpg</pic> ? ? ? ? ? ? <title>飛俠失足</title> ? ? ? ? ? ? <date>飛俠失足</date> ? ? </movie> ? ?? ? ?? ???<movie> ? ? ? ? ? ? <pic>4.jpg</pic> ? ? ? ? ? ? <title>得失寸心知</title> ? ? ? ? ? ? <date>得失寸心知</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>5.jpg</pic> ? ? ? ? ? ? <title>直沖云霄</title> ? ? ? ? ? ? <date>直沖云霄</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>6.jpg</pic> ? ? ? ? ? ? <title>勢不可擋</title> ? ? ? ? ? ? <date>勢不可擋</date> ? ? </movie>? ? ? ?? ? ???<movie> ? ? ? ? ? ? <pic>7.jpg</pic> ? ? ? ? ? ? <title>鷹擊長空</title> ? ? ? ? ? ? <date>鷹擊長空</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>8.jpg</pic> ? ? ? ? ? ? <title>凝神聚氣</title> ? ? ? ? ? ? <date>凝神聚氣</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>9.jpg</pic> ? ? ? ? ? ? <title>風激電飛</title> ? ? ? ? ? ? <date>風激電飛</date> ? ? </movie>? ?? ? ?? ? ? <movie> ? ? ? ? ? ? <pic>10.jpg</pic> ? ? ? ? ? ? <title>百萬噸暴扣</title> ? ? ? ? ? ? <date>百萬噸暴扣</date> ? ? </movie> ? ?? ? ? <movie> ? ? ? ? ? ? <pic>11.jpg</pic> ? ? ? ? ? ? <title>虎視眈眈</title> ? ? ? ? ? ? <date>虎視眈眈</date> ? ? </movie> ? ? <movie> ? ? ? ? ? ? <pic>12.jpg</pic> ? ? ? ? ? ? <title>一意專心</title> ? ? ? ? ? ? <date>一意專心</date> ? ? </movie> </gallery> Window.mxml <?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"? ? ? ? ? layout="absolute" width="100%" height="100%" ? ? ? ? horizontalAlign="left" ? ? ? ? showCloseButton="true" ? ? ? ? close="closeWindow(event);"? ? ? ? ? click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));"> ? ? ? ?? ? ? ? ? <mx:Script> ? ? ? ? ? ? ? ? <![CDATA[ ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? import mx.events.CloseEvent; ? ? ? ? ? ? ? ? ? ? ? ? import mx.managers.PopUpManager; ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? [Bindable] ? ? ? ? ? ? ? ? ? ? ? ? public var sourceImage:String; ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? private function closeWindow(e:CloseEvent):void { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? PopUpManager.removePopUp(this); ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ]]> ? ? ? ? </mx:Script> ? ? ? ?? ? ? ? ? <mx:Image source="{sourceImage}"/> ? ? ? ?? </mx:TitleWindow> |
轉載于:https://www.cnblogs.com/programmer-wind/archive/2012/02/22/2919554.html
總結
以上是生活随笔為你收集整理的创建弹出窗口的图片展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Delphi7构建工商银行电子口令密
- 下一篇： 做梦梦到开车开到悬崖边上什么意思