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">
  6.  
  7.     <mx:Style>
  8.         TabNavigator {
  9.             backgroundColor: black;
  10.             cornerRadius: 0;
  11.             tabStyleName: "MyTabs";
  12.             firstTabStyleName: "MyFirstTab";
  13.             lastTabStyleName: "MyLastTab";
  14.             selectedTabTextStyleName: "MySelectedTab";
  15.         }
  16.  
  17.         .MyTabs {
  18.             backgroundColor: black;
  19.             cornerRadius: 0;
  20.             color: black;
  21.         }
  22.  
  23.         .MyFirstTab,
  24.         .MyLastTab {
  25.             backgroundColor: black;
  26.             cornerRadius: 0;
  27.             color: black;
  28.         }
  29.  
  30.         .MySelectedTab {
  31.             backgroundColor: haloBlue;
  32.             color: haloBlue;
  33.             textRollOverColor: haloBlue;
  34.         }
  35.     </mx:Style>
  36.  
  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>
  54.  
  55. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: TabNavigator | 4 Comments » | Tags: , , , ,

你可能还对下列文章感兴趣:

4 comments | Add One

  1. Gucci Koo - 10/4/2008 at 11:22 pm

    老大啊，这例子完全看不懂啊
    我是看到定义的一堆样式，也是我没看到啥地方调用了这些样式啊

  2. Minidxer - 10/4/2008 at 11:25 pm

    8-15行，仔细看一下。

  3. LI - 04/20/2010 at 6:25 pm

    为什么只能设置3个啊样，超过4个怎么办啊？？每样式都不同

  4. li - 09/27/2011 at 3:41 pm

    怎么不管用啊，我把这段代码完全复制下来，用fb 4建了而一个，没有发现tab的皮肤起作用啊。是不是还需要其他的配置什么的？
    还有就是怎么知道TabNavigator里面的selectedTabTextStyleName等东西的？

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll