Flex SuperTabNavigator中SuperTab关闭按钮样式修改

由于需要使用带关闭功能的tabbar，因此使用了flexlib 中的SuperTabNavigator组件，用起来很方便，但是在生产环境中用户发现，很多用户不知道tab标签页的关闭功能（由于tabbar的CloseBtn默认是不显示的，默认是鼠标rollover才显示），因此查看了源码，找到了默认显示的方式。

public class SuperTab extends Tab {public static const CLOSE_TAB_EVENT:String = "closeTab";/** * Static variables indicating the policy to show the close button. *  * CLOSE_ALWAYS means the close button is always shown  关闭按钮一直显示 * CLOSE_SELECTED means the close button is only shown on the currently selected tab当前选中的显示 * CLOSE_ROLLOVER means the close button is show if the mouse rolls over a tab * CLOSE_NEVER means the close button is never show.永远不显示 */public static const CLOSE_ALWAYS:String = "close_always";public static const CLOSE_SELECTED:String = "close_selected";public static const CLOSE_ROLLOVER:String = "close_rollover";public static const CLOSE_NEVER:String = "close_never";<span style="white-space:pre"></span>...}

从SuperTab的开始就看到了这样的解释

只需要在代码中的SuperTabNavigator添加closePolicy即可

<containers:SuperTabNavigator id="superTabNav" tabStyleName="superTabBar" closePolicy="close_selected"></containers:SuperTabNavigator>

如果还需要修改关闭按钮的样式，可以使用css选择器

<fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";@namespace supertabs "flexlib.controls.tabBarClasses.*";.superTabBar{tabCloseButtonStyleName:"SuperTabButtonStyle";   } .SuperTabButtonStyle{  icon: Embed(source="resource/images/tabClose.gif");    } </fx:Style>

到此大功告成，最后上下效果图