更改Flex 3中的选项卡样式 [英] Change style of tabs in Flex 3

问题描述

我是Flex 3.4的新手。我想点击一个按钮来改变几个标签的样式（突出显示它们）。我来自一个JavaScript背景，不能以Flex的方式解释。

解决方案

Flex中的样式选项卡有点棘手 - TabBar而TabNavigator类有一个名为 tabStyleName 的样式，这是定义选项卡外观的另一个独立样式的名称。下面是一个例子，它通过改变TabBar上的 tabStyleName 样式将一组选项卡从红色背景更改为蓝色 - 希望您可以根据需要调整它。

---

 < mx：Style> 
 .redTabs {
 fillColors：＃cc0000，＃cc0000; 
} 
 
 .blueTabs {
 fillColors：＃0000cc，＃0000cc; 
} 
< / mx：样式> 
 
< mx：Script> 
 <！[CDATA [
 protected function changeStyle（event：MouseEvent）：void 
 {
 theTabs.setStyle（tabStyleName，blueTabs）; 
} 
]]> 
< / mx：Script> 
 
 < mx：Canvas label =applewidth =100％height =100％> 
< / mx：Canvas> 
< mx：Canvas label =orangewidth =100％height =100％> 
< / mx：Canvas> 
< mx：Canvas label =bananawidth =100％height =100％> 
< / mx：Canvas> 
< / mx：TabNavigator> 
 
   

编辑：我已将示例更改为使用TabNavigator。 / p>

I am new to Flex 3.4. I want to change style of few tabs (highlight them) on click of a button. I came from a javascript background and not able interpret in Flex's way.

解决方案

Styling tabs in Flex is sort of tricky - the TabBar and TabNavigator classes have a style called tabStyleName, which is the name of another separate style that defines the look of your tabs. Here's an example which changes a set of tabs from a red background to blue by changing the tabStyleName style on the TabBar - hopefully you can adapt it to whatever you need.

---

  <mx:Style>
    .redTabs {
      fillColors: #cc0000, #cc0000;
    }

    .blueTabs {
      fillColors: #0000cc, #0000cc;
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      protected function changeStyle(event:MouseEvent):void
      {
        theTabs.setStyle("tabStyleName", "blueTabs");
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="theTabs" x="10" y="10" width="200" height="200" tabStyleName="redTabs">
    <mx:Canvas label="apple" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="orange" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="banana" width="100%" height="100%">
    </mx:Canvas>
  </mx:TabNavigator>

  <mx:Button x="10" y="218" label="Change Style!" click="changeStyle(event)"/>

Edit: I've changed the example to work with TabNavigator.

这篇关于更改Flex 3中的选项卡样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！