Flex中创建一个ToggleButtonBar以及其toggleOnClick属性的相关使用方法的例子

By Minidxer | July 30, 2008

接下来的例子演示了Flex中如何创建一个ToggleButtonBar，以及其toggleOnClick属性的相关使用方法。本例中你还可以选择竖直方向或者横向的ToggleButtonBar，分别在CheckBox选中和取消的状态下点击相应的按钮察看效果（点两下）。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:ApplicationControlBar dock="true">
  8.         <mx:CheckBox id="checkBox"
  9.                 label="toggleOnClick"
  10.                 selected="true" />
  11.  
  12.         <mx:Label text="selectedIndex: {toggleButtonBar.selectedIndex}"
  13.                 textAlign="center"
  14.                 width="100%" />
  15.  
  16.         <mx:Label text="direction:" />
  17.         <mx:ComboBox id="comboBox"
  18.                 change="toggleButtonBar.direction = comboBox.selectedLabel">
  19.             <mx:dataProvider>
  20.                 <mx:Array>
  21.                     <mx:Object label="horizontal" />
  22.                     <mx:Object label="vertical" />
  23.                 </mx:Array>
  24.             </mx:dataProvider>
  25.         </mx:ComboBox>
  26.     </mx:ApplicationControlBar>
  27.  
  28.     <mx:HBox>
  29.         <mx:ToggleButtonBar id="toggleButtonBar"
  30.                 dataProvider="{viewStack}"
  31.                 toggleOnClick="{checkBox.selected}" />
  32.  
  33.         <mx:ViewStack id="viewStack"
  34.                 width="160"
  35.                 height="120"
  36.                 visible="{toggleButtonBar.selectedIndex > -1}">
  37.             <mx:Canvas label="Red" backgroundColor="red" />
  38.             <mx:Canvas label="Orange" backgroundColor="haloOrange" />
  39.             <mx:Canvas label="Yellow" backgroundColor="yellow" />
  40.             <mx:Canvas label="Green" backgroundColor="haloGreen" />
  41.             <mx:Canvas label="Blue" backgroundColor="haloBlue" />
  42.         </mx:ViewStack>
  43.     </mx:HBox>
  44.  
  45. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads