Styling individual tabs in a TabBar control

following example shows how you can style individual tabs in a Flex TabBar control by calling the <code>getChildAt()</code> method on the tab bar, and then calling <code>setStyle()</code> on the returned Tab reference.

&lt;?xml version="1.0"?&gt;

&lt;!-- http://blog.flexexamples.com/2007/11/19/styling-individual-tabs-in-a-tabbar-control/ --&gt;

&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

        layout="vertical"

        verticalAlign="middle"

        backgroundColor="white"&gt;

    &lt;mx:Script&gt;

    &lt;![CDATA[

        import mx.events.ItemClickEvent;

        import mx.controls.tabBarClasses.Tab;

        private function tabBar_creationComplete():void {

            var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];

            var color:String;

            var tab:Tab;

            var idx:uint;

            var len:uint = tabBar.dataProvider.length;

            for (idx = 0; idx &lt; len; idx++) {

                var i:int = idx % colorArr.length;

                color = colorArr[i];

                tab = Tab(tabBar.getChildAt(idx));

                tab.setStyle("fillColors", [color, "white"]);

                tab.setStyle("fillAlphas", [1.0, 1.0]);

                tab.setStyle("backgroundColor", color);

            }

        }

        private function tabBar_itemClick(evt:ItemClickEvent):void {

            viewStack.selectedIndex = evt.index;

    ]]&gt;

    &lt;/mx:Script&gt;

    &lt;mx:Array id="arr"&gt;

        &lt;mx:Object label="Red" /&gt;

        &lt;mx:Object label="Orange" /&gt;

        &lt;mx:Object label="Yellow" /&gt;

        &lt;mx:Object label="Green" /&gt;

        &lt;mx:Object label="Blue" /&gt;

    &lt;/mx:Array&gt;

    &lt;mx:TabBar id="tabBar"

            dataProvider="{arr}"

            creationComplete="tabBar_creationComplete();"

            itemClick="tabBar_itemClick(event);" /&gt;

    &lt;mx:ViewStack id="viewStack"

            width="{tabBar.width}"

            styleName="plain"&gt;

        &lt;mx:VBox id="redVBox" width="100%" height="100"&gt;

            &lt;mx:Label text="Red VBox" /&gt;

        &lt;/mx:VBox&gt;

        &lt;mx:VBox id="orangeVBox" width="100%" height="100"&gt;

            &lt;mx:Label text="Orange VBox" /&gt;

        &lt;mx:VBox id="yellowVBox" width="100%" height="100"&gt;

            &lt;mx:Label text="Yellow VBox" /&gt;

        &lt;mx:VBox id="greenVBox" width="100%" height="100"&gt;

            &lt;mx:Label text="Green VBox" /&gt;

        &lt;mx:VBox id="blueVBox" width="100%" height="100"&gt;

            &lt;mx:Label text="Blue VBox" /&gt;

    &lt;/mx:ViewStack&gt;

&lt;/mx:Application&gt;

    本文轉自 OldHawk  部落格園部落格，原文連結：http://www.cnblogs.com/taobataoma/archive/2008/01/13/1037060.html，如需轉載請自行聯系原作者