1??? ?flex4 API中的togglebuttonbar定义：
???????? ?ToggleButtonBar 控件定义一组水平或垂直按钮，这些按钮保持其选中或取消选中状态。在 ToggleButtonBar 控件中，只有一个按钮可以处于选中状态。这就意味着，当用户在 ToggleButtonBar 控件中选择一个按钮后，该按钮将保持选中状态直到用户选择其他按钮。
?????????? 要控制 ToggleButtonBar 控件的按钮样式，请使用ButtonStyleName、firstButtonStyleName 、lastButtonStyleName和 样式属性；请勿尝试设置 ToggleButtonBar 控件中单个 Button 控件的样式。
2???? ToggleButtonBar实现的导航
????????? 1? Work.mxml文件：
- <?xml?version="1.0"?encoding="utf-8"?>?
-
<local:WorkAS?xmlns:fx="http://ns.adobe.com/mxml/2009"? ?
-
??????????????xmlns:s="library://ns.adobe.com/flex/spark"? ?
-
??????????????xmlns:mx="library://ns.adobe.com/flex/mx"?xmlns:local="*"?width="400"?height="300">?
-
????<fx:Declarations>?
-
?????????
-
????</fx:Declarations>?
-
????<fx:Style?source="css/style.css"/>?
-
????<mx:VBox?verticalCenter="0"?horizontalCenter="0">?
-
????????<mx:HBox>?
-
????????????<mx:ToggleButtonBar?dataProvider="viewstack"??buttonStyleName="toggleButtonBarButtonSkin"? ?
-
????????????????????????????????firstButtonStyleName="toggleButtonBarButtonSkin"?lastButtonStyleName="toggleButtonBarButtonSkin"/>?
-
????????</mx:HBox>?
-
????<mx:ViewStack?id="viewstack">?
-
????????<mx:VBox?id="new1"?label="第一页">?
-
????????????<s:Button?label="1111"/>?
-
????????</mx:VBox>?
-
????????<mx:VBox?id="new2"??label="第二页">?
-
????????????<s:Button?label="2222"/>?
-
????????</mx:VBox>?
-
????????<mx:VBox?id="new3"??label="第三页">?
-
????????????<s:Button?label="3333"/>?
-
????????</mx:VBox>?
-
????????<mx:VBox?id="new4"??label="第四页">?
-
????????????<s:Button?label="4444"/>?
-
????????</mx:VBox>?
-
????</mx:ViewStack>?
-
????????????</mx:VBox>?
-
</local:WorkAS>?
???????? 2??? style.css文件：
?
- .toggleButtonBarButtonBar{ ?
-
????upSkin:Embed(source="assets/btnup.png"); ?
-
????overSkin:Embed(source="assets/btndown.png"); ?
-
????downSkin:Embed(source="assets/btnup.png"); ?
-
????focusSkin:Embed(source="assets/btnup.png"); ?
-
????disabledSkin:Embed(source="assets/btnup.png"); ?
-
????selectedUpSkin:Embed(source="assets/btndown.png"); ?
-
????selectedDownSkin:Embed(source="assets/btndown.png"); ?
-
????selectedOverSkin:Embed(source="assets/btnup.png"); ?
-
????selectedDisabledSkin:Embed(source="assets/btndown.png"); ?
- }?
实现效果：
?
?
就是对togglebuttonbar的Button 赋了各个转状态的皮肤。学习ING
