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