Question

如何在运行时更改选项卡导航器控件中选项卡的边框颜色？我试图用它的id“mytab”访问它并更新它的样式。

this.mytab.setStyle("bordercolor","red");

TabNavigator有多个标签，我必须根据某些逻辑更改几个标签的样式。 StyleDeclaration适用于tab navigoter下的所有选项卡但是如何使用基于componentid的CSSStyleDeclaration？这种方法唯一的缺点是不能为单个选项卡更改Style。

Answer 1

直接在TabNavigator上设置样式将不起作用。您必须在tabStyleName上设置TabNavigator属性，然后创建一个具有相同名称的样式，该样式将应用于您的标签。它与my answer to your other question的策略相同;只需设置borderColor样式。

如果您确实需要在运行时动态设置样式，则可以检索选项卡的CSSStyleDeclaration并将其设置为：

  <mx:Style>
    .tabStyle {
      /* define an empty style so there is something to get using getStyleDeclaration */
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      protected function changeStyle(event:MouseEvent):void
      {
        var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".tabStyle");
        cssStyle.setStyle("borderColor", "red");
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="mytab" width="200" height="200" tabStyleName="tabStyle">
    <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)"/>

在flex中运行时更改选项卡边框颜色

1 个答案: