Question

当我通过ActionScript动态创建选项卡时，新创建（和选定）选项卡的样式将应用于外观，而不是文本，除非我单击其他选项卡然后单击返回它。

的ActionScript

private function clickAddTabHandler(event:Event):void{
   var vbox:VBox = new VBox;
   var tab:Canvas = new (Canvas);
   vbox.label = "Select Location";
   vbox.addChild(tab);
   tabBar.addChild(vbox);
   tabBar.selectedIndex = tabBar.numChildren-1;
  }

MXML

<mx:TabNavigator id="tabBar" width="100%" height="100%" tabStyleName="tabNavigator" selectedTabTextStyleName="tabNavigatorSelected" tabHeight="19">

CSS

.tabNavigator
{
   disabledSkin: Embed(source="assets/skins/TabBar-tab_disabledSkin.png",
    scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   downSkin: Embed(source="assets/skins/TabBar-tab_downSkin.png",
   scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   overSkin: Embed(source="assets/skins/TabBar-tab_overSkin.png",
   scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   upSkin: Embed(source="assets/skins/TabBar-tab_upSkin.png",
   scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   selectedDisabledSkin: Embed(source="assets/skins/TabBar-tab_selectedDisabledSkin.png",
       scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   selectedUpSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
       scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   selectedOverSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
       scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   selectedDownSkin: Embed(source="assets/skins/TabBar-tab_selectedUpSkin.png",
       scaleGridTop=1, 
       scaleGridLeft=20, 
       scaleGridBottom=18, 
       scaleGridRight=32);
   textAlign: left; 
   paddingLeft: 20; 
   paddingRight: 20; 
   fontSize: 11; 
   fontFamily: Helvetica Neue; 
   color: #FFFFFF;
   textRollOverColor: #FFFFFF;
}

.tabNavigatorSelected
{
   textAlign: left; 
   paddingLeft: 20; 
   paddingRight: 20; 
   fontSize: 11; 
   fontFamily: Helvetica Neue; 
   color: #135F9E; 
   textRollOverColor: #135F9E; 
   textSelectedColor: #135F9E;
}

Answer 1

始终使用css我建议使用样式资源管理器。它一直帮助我获得正确的风格。

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

PS，使用“代码示例”按钮更好地格式化代码，使用引号和编辑器顶部的图像图标标注101010，或者只用4个空格缩进。这将使每个人都更容易阅读。

Flex 3 - 样式不完全应用于TabNavigator中动态创建的选项卡

1 个答案: