1     flex4 API中的togglebuttonbar定义：

          ToggleButtonBar 控件定义一组水平或垂直按钮，这些按钮保持其选中或取消选中状态。在 ToggleButtonBar 控件中，只有一个按钮可以处于选中状态。这就意味着，当用户在 ToggleButtonBar 控件中选择一个按钮后，该按钮将保持选中状态直到用户选择其他按钮。

           要控制 ToggleButtonBar 控件的按钮样式，请使用ButtonStyleName、firstButtonStyleName 、lastButtonStyleName和 样式属性；请勿尝试设置 ToggleButtonBar 控件中单个 Button 控件的样式。

2     ToggleButtonBar实现的导航

          1  Work.mxml文件：

   
   
   
   
    
    
    
    
    
  1. xml version="1.0" encoding="utf-8"?> 
    2. 
    
    
    
    
  2. <local:WorkAS xmlns:fx="http://ns.adobe.com/mxml/2009"   
    3. 
    
    
    
    
  3.               xmlns:s="library://ns.adobe.com/flex/spark"   
    4. 
    
    
    
    
  4.               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*" width="400" height="300"> 
    5. 
    
    
    
    
  5.     <fx:Declarations> 
    6. 
    
    
    
    
  6.          
    7. 
    
    
    
    
  7.     fx:Declarations> 
    8. 
    
    
    
    
  8.     <fx:Style source="css/style.css"/> 
    9. 
    
    
    
    
  9.     <mx:VBox verticalCenter="0" horizontalCenter="0"> 
    10. 
    
    
    
    
  10.         <mx:HBox> 
    11. 
    
    
    
    
  11.             <mx:ToggleButtonBar dataProvider="viewstack"  buttonStyleName="toggleButtonBarButtonSkin"   
    12. 
    
    
    
    
  12.                                 firstButtonStyleName="toggleButtonBarButtonSkin" lastButtonStyleName="toggleButtonBarButtonSkin"/> 
    13. 
    
    
    
    
  13.         mx:HBox> 
    14. 
    
    
    
    
  14.     <mx:ViewStack id="viewstack"> 
    15. 
    
    
    
    
  15.         <mx:VBox id="new1" label="第一页"> 
    16. 
    
    
    
    
  16.             <s:Button label="1111"/> 
    17. 
    
    
    
    
  17.         mx:VBox> 
    18. 
    
    
    
    
  18.         <mx:VBox id="new2"  label="第二页"> 
    19. 
    
    
    
    
  19.             <s:Button label="2222"/> 
    20. 
    
    
    
    
  20.         mx:VBox> 
    21. 
    
    
    
    
  21.         <mx:VBox id="new3"  label="第三页"> 
    22. 
    
    
    
    
  22.             <s:Button label="3333"/> 
    23. 
    
    
    
    
  23.         mx:VBox> 
    24. 
    
    
    
    
  24.         <mx:VBox id="new4"  label="第四页"> 
    25. 
    
    
    
    
  25.             <s:Button label="4444"/> 
    26. 
    
    
    
    
  26.         mx:VBox> 
    27. 
    
    
    
    
  27.     mx:ViewStack> 
    28. 
    
    
    
    
  28.             mx:VBox> 
    29. 
    
    
    
    
  29. local:WorkAS> 
    30.

         2    style.css文件：

 

   
   
   
   
    
    
    
    
    
  1. .toggleButtonBarButtonBar{  
    2. 
    
    
    
    
  2.     upSkin:Embed(source="assets/btnup.png");  
    3. 
    
    
    
    
  3.     overSkin:Embed(source="assets/btndown.png");  
    4. 
    
    
    
    
  4.     downSkin:Embed(source="assets/btnup.png");  
    5. 
    
    
    
    
  5.     focusSkin:Embed(source="assets/btnup.png");  
    6. 
    
    
    
    
  6.     disabledSkin:Embed(source="assets/btnup.png");  
    7. 
    
    
    
    
  7.     selectedUpSkin:Embed(source="assets/btndown.png");  
    8. 
    
    
    
    
  8.     selectedDownSkin:Embed(source="assets/btndown.png");  
    9. 
    
    
    
    
  9.     selectedOverSkin:Embed(source="assets/btnup.png");  
    10. 
    
    
    
    
  10.     selectedDisabledSkin:Embed(source="assets/btndown.png");  
    11. 
    
    
    
    
  11. } 
    12.

实现效果：

 

 

就是对togglebuttonbar的Button 赋了各个转状态的皮肤。学习ING