[Flex] Accordion系列 - Header背景图的设置

时间：2024-01-04 19:12:38
<?xml version="1.0" encoding="utf-8"?>

<!--Flex中如何通过getHeaderAt()函数以及selectedUpIcon,selectedOverIcon和selectedDownIcon样式给Accordion头部设置一个分割用图标的例子-->

<s:Application name="Accordion_getHeaderAt_selectedUpIcon_test"

               xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>

        <![CDATA[

            import mx.events.FlexEvent;

            import mx.controls.Button;

            [Embed("assets/bullet_red.png")]

            private const RedIcon:Class;

            [Embed("assets/bullet_orange.png")]

            private const OrangeIcon:Class;

            [Embed("assets/bullet_yellow.png")]

            private const YellowIcon:Class;

            [Embed("assets/bullet_green.png")]

            private const GreenIcon:Class;

            [Embed("assets/bullet_blue.png")]

            private const BlueIcon:Class;

            [Embed("assets/bullet_star.png")]

            private const StarIcon:Class;

            protected function accordion_creationCompleteHandler(event:FlexEvent):void

            {

                var idx:uint;

                var len:uint = accordion.numChildren;

                var btn:Button;

                for (idx=0; idx<len; idx++) {

                    btn = accordion.getHeaderAt(idx);

                    btn.useHandCursor = true;

                    btn.buttonMode = true;

                    btn.setStyle("selectedUpIcon", StarIcon);

                    btn.setStyle("selectedOverIcon", StarIcon);

                    btn.setStyle("selectedDownIcon", StarIcon);

                }

            }

        ]]>

    </fx:Script>

    <fx:Declarations>

        <!-- 将非可视元素（例如服务、值对象）放在此处 -->

    </fx:Declarations>

    <mx:Accordion id="accordion" openDuration="250" width="100%"  height="100%" creationComplete="accordion_creationCompleteHandler(event)">

        <mx:VBox id="redVbox" label="Red" icon="{RedIcon}" />

        <mx:VBox id="orangeVbox" label="Orange" icon="{OrangeIcon}" />

        <mx:VBox id="yellowVbox" label="Yellow" icon="{YellowIcon}" />

        <mx:VBox id="greenVbox"     label="Green" icon="{GreenIcon}" />

        <mx:VBox id="blueVbox" label="Blue" icon="{BlueIcon}" />

    </mx:Accordion>

</s:Application>

相关文章