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

问题描述

我是 Flex 3.4 的新手.我想通过单击按钮更改几个选项卡的样式(突出显示它们).我来自 JavaScript 背景，无法以 Flex 的方式进行解释.

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.

推荐答案

在 Flex 中设置选项卡样式有点棘手 - TabBar 和 TabNavigator 类有一个名为 tabStyleName 的样式，这是另一个的名称定义选项卡外观的单独样式.这是一个示例，它通过更改 TabBar 上的 tabStyleName 样式将一组选项卡从红色背景更改为蓝色 - 希望您可以根据需要进行调整.

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)"/>

我已更改示例以使用 TabNavigator.

I've changed the example to work with TabNavigator.

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