在flex中运行时更改选项卡边框颜色 [英] Changing tab border color at run time in flex

问题描述

如何在运行时在选项卡导航器控件中更改选项卡的边框颜色？我尝试访问它的IDmytab并更新它的样式。
$ b $ pre $ this.mytab.setStyle（bordercolor ，red）;

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

解决方案

直接设置样式在 TabNavigator 上不起作用。您必须在 TabNavigator 上设置 tabStyleName 属性，然后创建一个名称相同的样式，您的标签。这与我对您的其他问题的回答是一样的策略;只需设置 borderColor 样式即可。

---

如果您确实需要在运行时动态设置样式，你可以检索标签的 CSSStyleDeclaration ，并设置它： $ p> < mx：Style>
.tabStyle {
/ *定义一个空的样式，所以可以使用getStyleDeclaration * /
}
< / mx：Style>

< mx：Script>
<！[CDATA [
protected function changeStyle（event：MouseEvent）：void
{
var CSSsstyle：CSSStyleDeclaration = StyleManager.getStyleDeclaration（。tabStyle）;
cssStyle.setStyle（borderColor，red）;
}
]]>
< / 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>



How can I change border color of tab in tab navigator control at runtime? I am trying to access it with its id "mytab" and update it's style.

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

A TabNavigator has multiple tabs and I have to change style of few tabs based on some logic. StyleDeclaration is applicable for all the tabs under tab navigoter but how can use CSSStyleDeclaration based on componentid? The only shortfall with this approach is that Style can not be changed for individual tab.

解决方案

Setting the style directly on the TabNavigator won't work. You have to set the tabStyleName property on TabNavigator and then create a style with the same name, which will be applied to your tabs. It is the same strategy as my answer to your other question; just set the borderColor style instead.

---

If you really need to set the style dynamically at runtime, you can retrieve the CSSStyleDeclaration for the tabs and set it like so:

  <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中运行时更改选项卡边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！