记记对flexlib的VAccordion的使用-代码篇
来源：互联网 发布：网络推广的发展前景 编辑：程序博客网 时间：2024/05/16 08:13
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:flexlib="http://code.google.com/p/flexlib/" layout="vertical" viewSourceURL="srcview/index.html"> <mx:Style> Application { backgroundGradientColors: #FFFFFF, #FFFFFF; backgroundGradientAlphas: 1, 1; vertical-align: middle; horizontal-align: center; } VAccordion { headerHeight: 80; vertical-gap: 5; background-alpha:0; open-duration:500; border-style:none; padding-bottom:5; header-style-name: gradientHeader; } .gradientHeader { upSkin:ClassReference(); overSkin:ClassReference(); downSkin:ClassReference(); disabledSkin:ClassReference(); selectedUpSkin:ClassReference(); selectedOverSkin:ClassReference(); selectedDownSkin:ClassReference(); selectedDisabledSkin:ClassReference(); font-family:Arial; cornerRadii: 0, 0, 10, 10; borderColors: #FFFFFF, #FFFFFF; overBorderColors: #FFFFFF, #FFFFFF; selectedBorderColors: #FFFFFF, #FFFFFF; borderThickness: 2; borderAlpha: 1; fillColors: #FFFFFF, #FFFFFF; fillAlphas: 1, 1; fillColorRatios: 0, 255; overFillColors: #FFFFFF, #BAC2CF; overFillAlphas: 1, 1; overFillColorRatios: 0, 169; selectedFillColors: #FFFFFF, #BAC2CF; selectedFillAlphas: 1,1; selectedFillColorRatios: 0, 169; } Panel { borderStyle: solid; borderColor: #b7babc; corner-radius:10; borderAlpha: 1; roundedBottomCorners: true; headerHeight: 24; highlightAlphas: 0, 0; headerColors: #b1b7c4, #8392ab; titleStyleName: ; border-thickness-left:1; border-thickness-right:1; border-thickness-top:0; border-thickness-bottom:-5; border-thickness:1; } .mypanelTitle { color: #ffffff; fontSize: 12; } </mx:Style> <mx:Panel title="Essentials"> <flexlib:VAccordion id="accordion" headerLocation="below" width="200" resizeToContent="true" headerRenderer="Header" > <AccordionItem title="iTunes 7" image="@Embed('assets/essentials_itunes20070611.png')" description="Music. Movies. TV Shows. Podcasts." /> <AccordionItem title="QuickTime" image="@Embed('assets/essentials_quicktime20070611.png')" description="Enjoy crystal clear video with H.264 support." /> <AccordionItem title="Widgets" image="@Embed('assets/essentials_widgets20070611.png')" description="Amazing widgets for your Mac OS X Dashboard." /> <AccordionItem title="Safari 3 Public Beta" image="@Embed('assets/essentials_safari20070611.png')" description="The world's best browser. Now on Windows, too." /> <AccordionItem title="Movie Trailers" image="@Embed('assets/essentials_trailers20070703.png')" description="The latest previews. Many in gorgeous high-def." /> </flexlib:VAccordion> </mx:Panel> </mx:Application><?xml version="1.0" encoding="utf-8"?><CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:filters="flash.filters.*" verticalScrollPolicy="off" horizontalScrollPolicy="off" mouseOver="fakeMouseClick(event)"> <mx:Script> <![CDATA[ /** * This gets called for every MOUSE_OVER event. All we do is dispatch a CLICK event * and we can trick the Accordion into thinking the header was clicked. */ private function fakeMouseClick(event:MouseEvent):void { var clickEvent:MouseEvent = new MouseEvent(MouseEvent.CLICK, true, false, event.localX, event.localY); dispatchEvent(clickEvent); } ]]> </mx:Script> <mx:Style> .mainBox { padding-top:10; padding-left:10; padding-right:10; vertical-gap:0; } .title { font-weight: bold; color: #333333; font-size: 16; } .description { font-weight: normal; color: #666666; font-size: 12; } </mx:Style> <mx:VBox styleName="mainBox" width="100%" height="100%"> <mx:Label text="{data.title}" styleName="title" width="100%" /> <mx:Text text="{data.description}" styleName="description" width="100%" height="100%" selectable="false" /> </mx:VBox> <filters> <filters:DropShadowFilter angle="90" alpha=".1" blurX="0" distance="3" /> </filters> </CanvasButtonAccordionHeader><?xml version="1.0" encoding="utf-8"?><mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="140" verticalAlign="middle" horizontalAlign="center" showEffect="Fade" verticalScrollPolicy="off" horizontalScrollPolicy="off"> <mx:Script> <![CDATA[ [Bindable] public var description:String; [Bindable] public var image:*; [Bindable] public var title:String; ]]> </mx:Script> <mx:Image source="{image}" /></mx:VBox>
