如何设置TabNavigator选中标签的样式

Flex中的TabNavigator的样式中并不提供选中标签的样式，一下解决这个问题：原文见：http://guavus.wordpress.com/2009/01/16/skin-tabnavigator-tab/

How to Skin The Tabs in a TabNavigator Container

Posted by: vx on: January 16, 2009

• In: Blogroll
• Comment!

 

Rate This

TabNavigator containers come with a handful of styles that allow you to customize the appearance of the tabs:

tabStyleName
Name of CSS style declaration that specifies styles for the tabs. The default value is undefined.

firstTabStyleName
Name of CSS styledeclaration that specifies styles for the first tab. If this isunspecified, the default value of the tabStyleName style property isused.

lastTabStyleName
Name of CSS styledeclaration that specifies styles for the last tab. If this isunspecified, the default value of the tabStyleName style property isused.

selectedTabTextStyleName
Name of CSS style declaration that specifies styles for the text of the selected tab.

But sadly, you cannot easily specify a CSS style declaration for theselected tab. You can only specify a style for the text of the selectedtab. This sucks.

Luckily, there is a better way to customize the appearance of thetabs, without being constrained or limited by the styles mentionedabove. You can skin them!. In the CSS for your application, create anew style declaration for your tabs. Then define values for any or allof the skin properties: skin, disabledSkin, downSkin, overSkin, upSkin,selectedDisabledSkin, selectedDownSkin, selectedOverSkin,selectedUpSkin.

Now this is where it gets beautiful. The values you specify for theskin properties can point to custom components OR embeddable assets!You can use ClassReference() to specify custom components and Embed()to specify custom assets like images or SWFs.What’s great about thissolution is that you can also use the standard TabNavigator styles intandem with the custom skins.

This means you can skin the tab backgrounds with a GradientCanvascontainer, for example, and use the tabStyleName andselectedTabTextStyleName styles to customize the tab fonts!

Update: I’ve posted sample code below that uses a Canvas containerand some basic black-and-white styles to demonstrate how this works!

Sample code for the custom styles:

.tab
{
up-skin: ClassReference(”TabSkin”);
down-skin: ClassReference(”TabSkin”);
over-skin: ClassReference(”TabSkin”);

selected-up-skin: ClassReference(”SelectedTabSkin”);
selected-down-skin: ClassReference(”SelectedTabSkin”);
selected-over-skin: ClassReference(”SelectedTabSkin”);

background-color: #FFFFFF;

font-weight: normal;
color: #000000;
text-roll-over-color: #000000;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

.selectedTab
{
background-color: #000000;

font-weight: bold;
color: #FFFFFF;
text-roll-over-color: #FFFFFF;

corner-radius: 0;

border-style: solid;
border-thickness: 1;
border-color: #000000;
}

Sample code for the tab skins:

package
{
import mx.containers.Canvas;

public class TabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “tab”;

super.updateDisplayList (w, h);
}

}
}

package
{
import mx.containers.Canvas;

public class SelectedTabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = “selectedTab”;

super.updateDisplayList (w, h);
}

}
}

Sample code for the TabNavigator container:

<mx:TabNavigator id=”tabs”
tabStyleName=”tab” selectedTabTextStyleName=”selectedTab” />