如何在Flex 3中将Icon移动到TabBar标签的末尾

时间:2013-12-11 07:10:34

标签: flex flex3

我是Flex的新手。 如何将图标移动到TabBar标签的末尾。 TabBars标签区域就像第一个图标图像,然后是标签文本。 我想首先获得他们的标签,然后是图标图像。 如何改变他们的立场?

特别是当我点击图标时(恰好在图标上只包括TabBar的标签)我想显示一个提示框。

请帮我找到解决这个问题的方法。 在此先感谢。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
      <![CDATA[
                    import mx.controls.Alert;

        [Bindable]
        [Embed(source="/assets/graphics/arrowRight.jpg")]                 
        public var myIcon1:Class;
        [Embed(source="/assets/graphics/btn_done_off.gif")]                 
        public var myIcon2:Class;
        [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
        public var myIcon3:Class;
        [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
        public var myIcon4:Class;
        [Embed(source="/assets/graphics/question2.gif")]                 
        public var myIcon5:Class;





    ]]>
</mx:Script>
<mx:Spacer height="1000" >

</mx:Spacer>
<mx:TabNavigator width="50%" height="50%" >
    <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
    <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
    <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
    <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
    <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
</mx:TabNavigator></mx:Application>

1 个答案:

答案 0 :(得分:1)

试试这个,

<mx:canvas creationComplete="init()">
            <mx:Script> <![CDATA[
                                import mx.controls.Alert;

                    [Bindable]
                    [Embed(source="/assets/graphics/arrowRight.jpg")]                 
                    public var myIcon1:Class;
                    [Embed(source="/assets/graphics/btn_done_off.gif")]                 
                    public var myIcon2:Class;
                    [Embed(source="/assets/graphics/btn_exit_off.gif")]                 
                    public var myIcon3:Class;
                    [Embed(source="/assets/graphics/arrowRightBig.jpg")]                 
                    public var myIcon4:Class;
                    [Embed(source="/assets/graphics/question2.gif")]                 
                    public var myIcon5:Class;

                    private function init():void {
                       var tab:Tab;
                       var len:uint = tabBar.numChildren;
                       for (i=0; i<len; i++) {
                           tab = tabBar.getChildAt(i) as Tab;
                           tab.labelPlacement = "left";
                        }
        ]]>
        </mx:Script>
        <mx:Spacer height="1000" >

        </mx:Spacer>
        <mx:TabNavigator id="tabBar" width="50%" height="50%" >
            <mx:VBox id="one" label="one" icon="{myIcon1}" click="Alert.show('Tab1');" />
            <mx:VBox id="two" label="two" icon="{myIcon2}" click="Alert.show('Tab2');" />
            <mx:VBox id="three" label="three" icon="{myIcon3}" click="Alert.show('Tab3');" />
            <mx:VBox id="four" label="four" icon="{myIcon4}" click="Alert.show('Tab4');" />
            <mx:VBox id="five" label="five" icon="{myIcon5}" click="Alert.show('Tab5');" />
        </mx:TabNavigator>
    </mx:canvas>

希望它有所帮助。