Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式定制自己的TabNavigator的例子

http://blog.minidx.com/2008/10/04/1474.html

 

 

 

Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式定制自己的TabNavigator的例子     

By Minidxer | October 4, 2008

 

接下来的例子演示了Flex中如何利用tabStyleName, firstTabStyleName, lastTabStyleName和selectedTabTextStyleName样式，定制自己的TabNavigator。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml

1. <?xml version="1.0"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Style>
8.         TabNavigator {
9.             backgroundColor: black;
10.             cornerRadius: 0;
11.             tabStyleName: "MyTabs";
12.             firstTabStyleName: "MyFirstTab";
13.             lastTabStyleName: "MyLastTab";
14.             selectedTabTextStyleName: "MySelectedTab";
15.         }
17.         .MyTabs {
18.             backgroundColor: black;
19.             cornerRadius: 0;
20.             color: black;
21.         }
23.         .MyFirstTab,
24.         .MyLastTab {
25.             backgroundColor: black;
26.             cornerRadius: 0;
27.             color: black;
28.         }
30.         .MySelectedTab {
31.             backgroundColor: haloBlue;
32.             color: haloBlue;
33.             textRollOverColor: haloBlue;
34.         }
35.     </mx:Style>
37.     <mx:TabNavigator id="tabNavigator"
38.             width="100%"
39.             height="100%"
40.             tabHeight="40">
41.         <mx:VBox label="Panel 1" backgroundColor="haloOrange">
42.             <mx:Label text="TabNavigator container panel 1"/>
43.         </mx:VBox>
44.         <mx:VBox label="Panel 2" backgroundColor="haloGreen">
45.             <mx:Label text="TabNavigator container panel 2"/>
46.         </mx:VBox>
47.         <mx:VBox label="Panel 3" backgroundColor="haloBlue">
48.             <mx:Label text="TabNavigator container panel 3"/>
49.         </mx:VBox>
50.         <mx:VBox label="Panel 4" backgroundColor="haloSilver">
51.             <mx:Label text="TabNavigator container panel 4"/>
52.         </mx:VBox>
53.     </mx:TabNavigator>
55. </mx:Application>